2067390 - [Windows 10] The final theme exceeds the single line layout in the Appearance section

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[Gabi Cheta [:Gabi] Desktop QA]

Attachment: themes line

Affected versions

• Firefox 157.0a1

Affected platforms

• Windows 10 x64

Steps to reproduce

1. Open Customization Panel in a new tab page
2. Observe the Appearance themes display

Expected result

• One line of light/dark themes is displayed in the Appearance section based on the figma design

Actual result

• The final theme exceeds the single line layout

Regression range
*New implementation

Additional notes

• Attached screenshot

Comment 1

[Hackbot [:hackbot]]

The compact theme row has almost no horizontal headroom, so anything that takes a few px away from it wraps the 6th swatch.

Measuring the chain (all values at newtab's 15px root font size):

• Available width: the panel is width: 418px with padding-inline: 0 (_CustomizeMenu.scss#179), and .home-section adds padding-inline: var(--space-xlarge) = 22.5px per side plus overflow-y: auto (_CustomizeMenu.scss#332-338) → 373px, less the vertical scrollbar.
• Required width: 6 themes (showInCompactLayout in ThemesList.sys.mjs) × (48px .theme-preview + 1px border + 2px margin per side = 54px) + 5 × --space-small (7.5px, set for the compact row at _CustomizeMenu.scss#305-321) = 361.5px.

That leaves ~11.5px of slack. On Windows the .home-section scrollbar is a classic ~15-17px one, so the line box drops to ~356px and the last item wraps — the row container is flex-wrap: wrap (moz-fieldset.css#67-72) and the swatches cannot shrink: .theme-preview is a fixed 48px square (theme-picker.css#49-54) and nothing sets min-width: 0 or flex-shrink on the item (moz-visual-picker-item.css#50-62). macOS/Linux differ only because of scrollbar width, which is likely why bug 2058476 is the same defect surfacing under a different trigger.

Proposed fix — make the compact row shrink to fit rather than buying back a few px of padding, since a wallpaper/section change or a wider scrollbar would re-break it:

1. In theme-picker.css, add :host([layout="compact"]) rules so the swatches flex: min-width: 0 on moz-visual-picker-item, and .theme-preview { width: 100%; max-width: var(--size-item-xlarge); height: auto; aspect-ratio: 1; }. Keep wrapping for layout="full", which legitimately needs it for all 12 themes.
2. Alternatively (newtab-local, no toolkit change): expose the preview size as a custom property and have .appearance-section theme-picker set a smaller value, since inherited custom properties already cross into the shadow tree the same way --theme-picker-gap-column does.

Verification anchors: test_theme_picker.html#441-476 (testCompactModeRendering, asserts the 6 items) and ContentSection.test.jsx. Neither asserts the row stays on one line, so a check that all 6 items share an offsetTop at a constrained width would be worth adding.

Not verified by running a build — this is from reading the CSS and the token values.

---

Suggested severity: S4
Purely cosmetic misalignment in the customize panel: all 6 themes remain visible and selectable, and nothing functional is blocked.

---

If you'd like to provide feedback on this comment, please use the 👍 or 👎 reaction.
If you want to categorize your feedback you can add one of the following tags: ai-triage-wrong-file, ai-triage-wrong-cause, ai-triage-hallucination, ai-triage-out-of-scope.