Resolve text descender clipping in Firefox
What does this MR do and why?
Update height and line-height settings for navigation to prevent text descender clipping in Firefox. This approach relies on setting a height for the anchor and letting the text be displayed normally within instead of relying on line height and padding to determine the height.
Screenshots or screen recordings
📸 Expand screenshots
Before | After | |
---|---|---|
Firefox | ||
Firefox | ||
Arc (Chromium) (No visual change) | ||
Arc (Chromium) (No visual change) | ||
Height (Unchanged computed at 32px) |
How to set up and validate locally
Using Firefox and an additional browser (I used Arc which is Chromium):
- View left sidebar navigation in GDK (or review app) to confirm that:
- Descenders are not visibly cropped.
- Navigation item height remains unchanged (32px).
- Resizing text also resizes the nav item without cropped descenders.
- Collapsed state has no regression.
- Flyouts have no regression.
- Alpha dark mode has no regression (uses separate style sheet).
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #386470 (closed)
Edited by Jeremy Elder