チュートリアルページのレイアウト崩れをCSSスコープ修正で解決

/docs/tutorials ページで発生していたセクションの重なりと不自然な余白の2つのレイアウトバグを、CSSの適用スコープ見直しと不要なクラスの削除で修正しました。

背景

チュートリアルページでは、中間的な画面幅（ナローウィンドウやスプリットスクリーン表示）において「Advanced」セクションが「Beginner」カードの上に重なるバグが発生していました。Beginnerカードのコンテンツがコンテナの高さを超えたため、次のセクションがその上に描画されてしまう状態でした。

この重なりを修正した後には、BeginnersセクションとAdvancedセクション間に不自然に大きな空白が生じるという副作用も確認されました。原因を辿ると、2つの独立した問題が組み合わさっていました。

技術的な変更

問題の根本は、_docs.scss に記述されたグローバルな max-height: 500px が _cards.scss のモバイル向けリセットより後に読み込まれ、カードの高さを強制的に制限していた点にあります。

_sass/modules/_docs.scssの変更前:

.card__fullwidth .card {
  max-height: 500px !important;
}

変更後:

.card__fullwidth .card {
  max-height: none !important;

  @media (min-width: 768px) {
    max-height: 500px !important;
  }
}

max-height: 500px の適用をビューポート幅 768px 以上に限定することで、モバイル・ナロー幅では制限を解除し、コンテンツが自然な高さで表示されるようになりました。

不自然な余白の原因は、padfix クラスと common-padding--bottom-small クラスの組み合わせにありました。padfix はCSSの古い回避策として padding-bottom: 80px を付与するクラスで、_cards.scss 内に定義されていました。

_pages/tutorial.htmlの変更:

<!-- 変更前 -->
<div class="docs cards common-padding--bottom-small padfix">

<!-- 変更後 -->
<div class="docs cards">

_sass/modules/_cards.scssの変更:

/* 削除されたブロック */
&.padfix {
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  &.padfix {
    padding-bottom: 0;
  }
}

さらに _cards.scss では max-height: auto !important を max-height: none !important に修正しています。auto はCSSの max-height プロパティの有効値ではないため、none（制限なし）が正しい記述です。

設計判断

CSSカスケードの問題をグローバル修正ではなくメディアクエリのスコープ限定で解決するアプローチが採用されました。

_docs.scss の max-height: 500px はデスクトップ表示でカードの高さを揃えるために必要な制約です。これを全幅削除するのではなく、適用条件をメディアクエリで絞ることで、デスクトップのデザイン意図を維持したまま、ナロー幅での高さ制限を解除しています。

padfix クラスの削除は、歴史的な回避策をクリーンアップする判断です。本来の問題（max-height によるコンテンツのクリッピング）が解消されたことで、その補正として存在していた padding-bottom: 80px も不要になりました。HTML側のクラス指定とSCSS側の定義の両方を同時に削除することで、将来的な混乱を防いでいます。

まとめ

CSSの読み込み順とカスケードが引き起こすレイアウト崩れを、グローバルスタイルの削除ではなくメディアクエリによるスコープの精緻化で解消した修正です。max-height の適用範囲をビューポート幅で制御するというシンプルな変更が、重なりと余白の両問題を一貫した方針で解決しています。