2064042 - Content is partially cutoff in Privacy widget medium size when there are longer messages shown with DE, FR locales

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Attachment: privacy widget FR message.png

Affected versions

• Firefox 154.0 (New Tab addon - 156.0.20260816.233558)
• Firefox 156.0a1

Affected platforms

• Windows 11 x64
• Ubuntu 26.04
• macOS 27

Preconditions

• Use builds with different locales (FR, DE for example)
• Have multiple trackers blocked (3 digit number)

Steps to reproduce

1. Enable the privacy widget on medium size
2. Wait for a longer message to appear (2-3 rows)

Expected result

• No UI issues are seen on the widget main message

Actual result

• When there is a longer message displayed, the action button is pushed downwards and gets cutoff. Also the message "Trackers blocked today accross x sites" extends over the three dots menu when there are 3 digits trackers blocked displayed.

Regression range

• New feature

Additional notes

• The issue can be seen in the attachment here (windows), and in the following video for macOS.

Comment 1

[BugBot [:suhaib / :marco]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 2

[Hackbot [:hackbot]]

Triage / fix plan (reasoned from the source; not built or run).

Likely root cause. The medium Privacy card is a hard-height box that is only tall enough for a single-line secondary message, and it clips anything that doesn't fit:

• widget-base-style gives .medium-widget a fixed height: var(--newtab-card-height-small) — browser/extensions/newtab/content-src/styles/_mixins.scss, which is 133px in browser/extensions/newtab/content-src/styles/_variables.scss.
• .privacy adds overflow: clip (for the celebration sparkles) — browser/extensions/newtab/content-src/components/Widgets/Privacy/_Privacy.scss.
• In the medium tip/streak layout the count block is turned into a row (number beside the two-line label) — _Privacy.scss#104-111 — and neither .privacy-body nor .privacy-tip-message has min-height: 0 or a line clamp, and there is no .privacy-cta sizing rule at all. So when a DE/FR message wraps to 2–3 lines, .privacy-body's min-content height exceeds the card, the moz-button CTA at Privacy.jsx#640-651 lands outside the 133px box and is clipped, and the count row is pushed to the very top of the card.
• The second symptom (label running under the "…" button with a 3-digit count) is the same overflow plus an unreserved gutter: .privacy-title-wrapper is position: absolute in the top-inline-end corner — _Privacy.scss#59-66 — so .privacy-count-text (Privacy.jsx#618-629) has no horizontal budget subtracted for it and simply flows beneath it.

Proposed approach (all in _Privacy.scss; no JSX change should be needed):

1. Reserve the menu gutter — add a padding-inline-end (≈ --space-xlarge, the ghost button's footprint) to .privacy-count (or .privacy-count-text) in the .has-tip-msg.medium-widget / .has-streak.medium-widget case, so the localized label can never reach under the "…" button.
2. Make the overflow absorb into the message instead of the CTA — set min-height: 0 on .privacy-body and on .privacy-tip-content / .privacy-streak, give .privacy-tip-message a clamp in the medium layout (display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden, the pattern already used in _Lists.scss), and pin the CTA with flex: 0 0 auto so it is the last thing to lose space rather than the first.
3. Tighten the medium tip layout's vertical budget — reduce .privacy-count-number's font-size (_Privacy.scss#205-210) under .has-tip-msg.medium-widget, and/or drop the .privacy-divider margin-block-end there.

A design decision is embedded in (2): whether long localized copy should be truncated or whether the medium card should be allowed to grow. Given grid-auto-rows: var(--row-height) and grid-row: span 2 on the medium card, growing it would desynchronise the widget grid, so clamping is the cheaper fix — worth a UX sign-off before landing.

Existing tests. browser/extensions/newtab/test/jest/content-src/components/Widgets/Privacy.test.jsx covers the variants/count formatting/CTA but asserts nothing about layout (jsdom doesn't paint), and there is no browser-chrome test that renders the privacy widget at all. Real-layout coverage of this widget is a gap; a mochitest in browser/extensions/newtab/test/browser/ measuring that .privacy-cta stays inside the card's client box (in the style of browser_newtab_side_by_side_layout.js) would be the natural regression test.

Severity: S3 — a localized layout defect that hides an action button and overlaps the menu affordance for all longer-string locales at medium size, but it is non-functional-loss and has an in-product workaround (resize the widget to large).

---

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.