[ma91n]

close #488

「Guidelines」のドロップダウン（6 群・23 件）を 2 列にした。

	before	after
パネルの高さ	約 1,079px	約 578px
スクロール	viewport が 1,143px を超えないと出る（＝ノート PC では常に出る）	出ない
幅	内容なり（約 230px）	458px

作り

グリッドではなく多段組（column-width）。 技術ブログ #2908 と同じで、理由も同じ 2 つ。

• グリッドは行の高さを左右でそろえるので、件数の少ない群の下に空きが出る
• 多段組なら break-inside: avoid で群が列の途中で割れない

列数は列幅の下限で決めるので、幅が足りない場所では自動で 1 列に落ちる。

幅は「最長の行が折り返さない」で決めた。 14px の実測（和文 1 文字 14px）で、行のいちばん長い Markdown設計ドキュメント が 175px、群ラベルの はじめての〇〇シリーズ が 154px。左右のパディング 24px を足して列の内寸 200px、溝 32px、パネルの余白 24px と枠 2px で 458px。

対象外

• 992px 未満はハンバーガーの中の別部品（VPNavScreenMenuGroup）が描くので変わらない
• 「About Us」のドロップダウンは群を持たない 6 件の平らな並び（216px）なので当たらない。規則は :has(.VPMenuGroup) で「群を持つドロップダウン」に限定している

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[ma91n]

群のラベルに枠を足し、行を 8px 下げた（追加コミット）。技術ブログ #3226 / #3180 と同じ形。

ラベルの枠

2 列の多段組は左に余白が無く縦罫を引く場所が無いので、群を表す印はラベル自身が持つしかない。枠はタグのチップ（ピル型）と取り違えられないよう、角丸は小さな部品の段（4px）の四角のままで地は敷かない。幅は文字ちょうどに留める——列幅いっぱいに伸ばすと同じ幅のボタンの列に見える。

枠を足したぶん文字は一段引いた（14px/600 → 12px/400）。押せない分類の名前が行き先より重いと読む順が逆になるので、大きさ・太さ・色の 3 つで押せる名前と分ける。枠の中の文字の位置（左 3 ＋ 枠 1 ＋ 余白 8 ＝ 12px）は、2 列にする前の行の文字と同じ。

行の字下げ

ラベルより 8px 下げた。16px は強すぎる（技術ブログ #3180 が実測で 8px 止まりと決めている）。押せる範囲は列いっぱいのままで、下げるのは文字だけ。

幅の引き直し

字下げのぶん列が広くなるので、実測で取り直した（Noto Sans CJK、14px）。

	幅
いちばん長い行 Markdown設計ドキュメント	181px
＋ 左の字下げ 20px ＋ 右の余白 12px	213px
いちばん長い群ラベル はじめての〇〇シリーズ（12px、枠込み）	152px

列の内寸を 220px（8px の余裕つき）取り、溝 32・パネルの余白 24・枠 2 で 500px。前のコミットは 458px だった。