`wa-dropdown-item` のディセンダークリッピングを修正
<wa-dropdown-item> のラベル部分で g・y・j などのディセンダーを持つ文字の下部が切り取られるバグが修正されました。原因は、機能しないテキスト省略のために設定されていた overflow: hidden でした。
背景
#2207 で報告されたこのバグは、g・y・j といった ディセンダー(ベースラインより下に伸びる字形)を持つ文字の末端が、ドロップダウンアイテムのラベル内でクリッピングされるというものでした。この問題は特定の行の高さ設定で顕著になることが報告されていました。
根本原因は 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: hidden・text-overflow: ellipsis・white-space: nowrap の3プロパティです。flex: 1 1 auto と min-width: 0 は維持されており、ラベルのフレックス挙動は変わりません。
設計判断
テキスト省略プロパティを単に無効化するのではなく、完全に削除するアプローチが採られました。
PR内のコメントでは、ラベルはそもそも折り返していなかったという分析のもと、省略処理のコードを残す理由がないと判断されています。テキストの省略や折り返しが必要なユースケースはカスタムスタイルで対応できますが、ドロップダウンアイテムのテキストは通常長くないため、デフォルトでその必要性は低いという見解が示されています。
この判断は、機能しないコードを削除することで将来の混乱を防ぐ明快な設計です。overflow: hidden を overflow: visible に変更するだけでも修正は可能でしたが、それでは意味のない text-overflow と white-space が残り続けます。3プロパティをまとめて削除することで、スタイルの意図が明確になります。
まとめ
この修正は、フレックスレイアウトの挙動により実質的に機能していなかったCSSを削除することで、ディセンダークリッピングを根本から解消しています。コードを減らすことでバグを修正するという、シンプルかつ明快な変更です。