`wa-dropdown-item` のディセンダークリッピングを修正

shoelace-style/webawesome

<wa-dropdown-item> のラベル部分で gyj などのディセンダーを持つ文字の下部が切り取られるバグが修正されました。原因は、機能しないテキスト省略のために設定されていた overflow: hidden でした。

背景

#2207 で報告されたこのバグは、gyj といった ディセンダー(ベースラインより下に伸びる字形)を持つ文字の末端が、ドロップダウンアイテムのラベル内でクリッピングされるというものでした。この問題は特定の行の高さ設定で顕著になることが報告されていました。

根本原因は overflow: hidden にあります。このプロパティはテキスト省略(truncation)のために設置されていましたが、PRの分析によればその省略は実際には機能していませんでした。ホスト要素がフレックスコンテナであり、アイテムのデフォルトが min-width: auto であるため、アイテムはコンテンツサイズより小さく収縮しません。その結果、テキストが折り返したり省略されたりすることはなく、overflow: hidden はディセンダーをクリップするだけの存在になっていました。

技術的な変更

dropdown-item.styles.ts#label セレクタから、テキスト省略に関連する3つのプロパティが削除されました。

変更前:

#label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

変更後:

#label {
  flex: 1 1 auto;
  min-width: 0;
}

削除されたのは overflow: hiddentext-overflow: ellipsiswhite-space: nowrap の3プロパティです。flex: 1 1 automin-width: 0 は維持されており、ラベルのフレックス挙動は変わりません。

設計判断

テキスト省略プロパティを単に無効化するのではなく、完全に削除するアプローチが採られました。

PR内のコメントでは、ラベルはそもそも折り返していなかったという分析のもと、省略処理のコードを残す理由がないと判断されています。テキストの省略や折り返しが必要なユースケースはカスタムスタイルで対応できますが、ドロップダウンアイテムのテキストは通常長くないため、デフォルトでその必要性は低いという見解が示されています。

この判断は、機能しないコードを削除することで将来の混乱を防ぐ明快な設計です。overflow: hiddenoverflow: visible に変更するだけでも修正は可能でしたが、それでは意味のない text-overflowwhite-space が残り続けます。3プロパティをまとめて削除することで、スタイルの意図が明確になります。

まとめ

この修正は、フレックスレイアウトの挙動により実質的に機能していなかったCSSを削除することで、ディセンダークリッピングを根本から解消しています。コードを減らすことでバグを修正するという、シンプルかつ明快な変更です。

記事メタデータ

Generated by:
Claude Sonnet 4.6 for DiffDaily
LLM Trace:
d8b2a869

この記事はAIによって自動生成されています。内容の正確性については、必ずソースコードやPRを確認してください。

品質レビュー結果

Review Status:
リトライ後承認
Review Count:
2回 (改善を経て承認)
Reviewed by:
Gemini 2.5 Pro for DiffDaily

Review Criteria:

記事構成 ✓ PASS

Title, Context, Technical Detailの存在と明確さ

「総論→各論→結論」の構成が明確です。リード文、背景、技術的な変更、設計判断、まとめの各要素がすべて含まれており、理想的な構成です。

カスタムMarkdown構文 ✓ PASS

シンタックスハイライト・GitHubリンク記法の正確性

ファイル名付きシンタックスハイライト(```typescript:...)とGitHubリンク記法([#2207])が正しく使用されています。

対象読者への適合性 ✓ PASS

エンジニア向けの適切な技術レベルと表現

CSSのフレックスボックスやoverflowに関する知識を前提としており、専門知識を持つエンジニアという対象読者に適合した内容です。

パラグラフ・ライティング ✓ PASS

トピックセンテンス・1段落1トピック・段落長

各セクション、各パラグラフが「総論→各論」で構成され、トピックセンテンスが明確です。1段落1トピックの原則が守られており、可読性が高いです。

Diff内容との照合 ✓ PASS

コードブロックとDiff内容の一致

記事内のコードブロック(変更前・変更後)は、提供されたDiffの内容を正確に反映しています。ファイルパスも一致しています。

技術用語の正確性 ✓ PASS

技術用語の正確な使用

「ディセンダー」「クリッピング」「フレックスコンテナ」といった技術用語が、PRの文脈に沿って正確に使用されています。

説明の技術的正確性 ✓ PASS

技術的主張の正確性と論理性

バグの原因である `overflow: hidden` が、フレックスコンテナの挙動 (`min-width: auto`) によって意図通りに機能していなかったという説明は、技術的に正確かつ論理的です。

事実の突合 ✓ PASS

PR情報による主張の裏付け(ハルシネーション検出)

記事内の主張はすべてPRのDescriptionやDiffの内容に基づいており、根拠のない推測や憶測(ハルシネーション)は見られません。

数値・固有名詞の確認 ✓ PASS

PR番号・コミットID・バージョン等の正確性

PR番号(#2208)とIssue番号(#2207)が正確に記載されています。

タイトル・説明との一致 ✓ PASS

記事タイトル・説明とPR内容の一致

記事タイトル「`wa-dropdown-item` のディセンダークリッピングを修正」は、PRのタイトル「Don't trim descenders in dropdown items」の内容を正確に反映しています。

外部知識の正確性 ✓ PASS

PRに記載のない外部知識(LTS、サポート状況など)の不使用

記事の内容は提供されたPR情報に限定されており、バージョン情報やサポート状況といったPR外の知識の追記はありません。

時間表現の正確性 ✓ PASS

時間表現がPR情報と一致しているか

「修正されました」という過去形の表現は、完了した変更を記述するPRの文脈と一致しており、時間表現は正確です。