経緯
![左側のタブバーがアイコンだけの状態になってしまった Vivaldi](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-1.jpg)
Vivaldi を操作していたら誤ってタブバーがファビコンだけの状態になってしまい、タブバーとタブの間の境界でマウスアイコンの↔も表示されずに元の長さに戻せなくなってしまいました。
これではどのページを開いているのか分かりづらいので対処。
対処
上述の通りマウス操作ではにっちもさっちもいかず、設定を開いても該当項目がなさそう……ということで途方に暮れてしまいました。
そこで自分でcssを当てるカスタムcssに手を伸ばすことにしました。
![試験的機能でカスタムcssをオン](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-2.jpg)
まずは vivaldi://experiments/
をタブで開いて Vivaldi の試験運用機能を開きます。ここから「Allow for using CSS modifications.」にチェックを入れてカスタムcssを有効にします。
![チェインコマンドで Vivaldi そのものを開発者ツールで見るように設定](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-3.jpg)
続いてチェインコマンドを上述のように設定。これで Vivaldi そのものを開発者ツールで確認できるようになります。これで要素名や id, class名 を取得したり、リアルタイム編集で見た目を調整することができます。
![開発者ツールで Vivaldi のクラスなどを確認](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-4.jpg)
無事開発者ツールが開いたので要素や当たっている css を確認します。
ここで調整しながら次のような css を作成しました。
#main .inner > div:nth-of-type(2) {
width: 280px!important;
}
#tabs-tabbar-container {
width: 280px!important;
}
#tabs-container {
width: 140px!important;
}
#tabs-subcontainer {
width: 140px!important;
}
#tabs-subcontainer.left, #tabs-subcontainer.right {
flex-basis: auto!important;
}
#tabs-subcontainer .tab-position {
width: 140px!important;
}
![カスタムcss のファイルを指定](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-5.jpg)
最後に試験運用機能でオンにしたことで「外観」に「オリジナルカスタムUI」の項目が増えているので、ここで上述のカスタムcssを設置したディレクトリを指定、 cssファイル を読み込ませます。
![長さが復活したタブバー](https://labor.ewigleere.net/wp-content/uploads/2022/05/vivaldi-tabbar-width-adjust-20220505-6.jpg)
これでタブバーに長さが復活しました。ついでにたまに誤スクロールでタブバーの幅を伸縮してしまう現象も、!important
指定で無視されるようになったのでストレスがなくなった、と思います。