Guides Index Flyout メニューのオーバーフロー修正

Rails ガイドのデスクトップ向けインデックスで、3 列レイアウトがパネル幅を超えてはみ出していた問題を、CSS のレイアウト手法を変更することで解消しました。

背景

Guides Index の flyout メニュー は、.guides-section 要素を 3 列で配置し、各列に width: 33% と右側に 2em のマージンを付与していました。その結果、3 列分の幅と合わせて 2 × 2 em の余白が加算され、コンテナ幅 100% を超過し、右端の列がパネルからはみ出して表示が崩れていました。特に長いリンクテキストがパネル外にはみ出すことで、ユーザーが項目を正しく参照できない状態となっていました。

この UI の欠陥は、ガイド閲覧時のユービリティを低下させるだけでなく、レスポンシブデザインの一貫性も損なうため、根本的なレイアウト調整が必要でした。

技術的な変更

列間の余白を column-gap に置き換え、各セクション幅を calc で算出 することで、合計幅が正確に 100% になるよう修正しました。具体的には、.guides-section-container に column-gap: 2em; を追加し、.guides-section の右マージンを除去して margin: 0 0 0.5em 0; に変更しました。さらに、幅指定を width: calc((100% - 4em) / 3); に置き換えることで、2 つのギャップ分 (4 em) を差し引いた残り幅を 3 等分しています。

@@ -758,14 +758,15 @@ body.guide {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
+      column-gap: 2em;
       max-height: 60em;
       width: 100%;

       .guides-section {
         flex: auto;
-        margin: 0 2em 0.5em 0;
+        margin: 0 0 0.5em 0;
         text-align: left;
-        width: 33%;
+        width: calc((100% - 4em) / 3);

この変更により、3 列と 2 つのギャップがちょうど 100% に収まり、右端の列がパネルの境界内に収束します。結果として、長いリンクテキストもはみ出すことなく、視覚的に均一なレイアウトが実現されました。

設計判断

column-gap と calc の組み合わせ は、従来の個別マージン調整に比べてレイアウトの意図が明示的で保守性が高くなります。マージンベースの幅計算は要素数やギャップ幅が変わった際に再計算が必要になる一方、column-gap はフレックスコンテナが自動的に間隔を管理し、calc が余白分を除外した正確な幅を提供するため、将来的なデザイン変更が容易です。

このアプローチは、CSS のモジュラリティ を尊重しつつ、パネルサイズに対する過剰幅のリスクを根本的に排除しています。既存の flex 設定は維持されるため、他のガイドページへの影響はありません。

まとめ

本修正は、Guides Index の flyout メニューがパネル幅を超えてはみ出す問題を、column-gap と calc を用いた正確な幅計算で解決しました。レイアウトロジックをシンプルに保ちつつ、将来的な UI 調整が容易になる設計判断が示されています。