JSを使わずにアドレスバーの幅を垂直タブバーに合わせるカスタムCSS

[Quartz1216]

JSを使わずに無理やりメインバーの幅を動的に垂直タブバーに合わせるカスタムCSSです｡

タブバーのワークスペースボタンに付与されるwidthを1ピクセルずつ判定し､#browserに--Width変数として適用します｡

#mainbarなどにwidth:var(--Width);を適用すれば使えるはずです｡
arcライクなスタイルを書くときに使えると思います｡

div#browser:has(.tabbar-workspace-button[style="width: 0px;"]) {--Width: 0px;}
div#browser:has(.tabbar-workspace-button[style="width: 1px;"]) {--Width: 1px;}
div#browser:has(.tabbar-workspace-button[style="width: 2px;"]) {--Width: 2px;}
~
中略
~
div#browser:has(.tabbar-workspace-button[style="width: 358px;"]) {--Width: 358px;}
div#browser:has(.tabbar-workspace-button[style="width: 359px;"]) {--Width: 359px;}
div#browser:has(.tabbar-workspace-button[style="width: 360px;"]) {--Width: 360px;}

全文(Gist)

ツッコミ待ちです