2041627 - End-to-End Encryption account settings: "Publish"/expiry/remove buttons are clipped when the pane is narrow and the description wraps

Status: RESOLVED FIXED

(MailNews Core :: Security: OpenPGP, defect)

Description

[Airat Makhmutov]

Attachment: unfixed.png

Steps to reproduce:

In Account Settings → End-to-End Encryption, each listed OpenPGP key shows
small action buttons next to a descriptive sentence: a "Publish" button next
to "Publishing the public key on a keyserver allows others to discover it.",
and the expiry/remove buttons on other rows.

When the account settings window is narrow enough that the description text
wraps to a second line, the button is shrunk narrower than its own label and
the text spills past the button border.

Steps to reproduce

1. Configure an account with a personal OpenPGP key.
2. Open Account Settings → End-to-End Encryption for that account.
3. Narrow the window until the "Publishing the public key…" sentence wraps
   to two lines.

The defect is invisible with the short English "Publish" label and only
becomes obvious with longer localized labels — it was originally reported
downstream with the Russian locale ("Опубликовать"). It is governed by pane
width and label length, not by the OS, desktop or compositor.

Root cause

In mail/extensions/am-e2e/am-e2e.js the per-key controls are HTML
<button> elements (publishButton, dateButton, remove), each given the
shared button-small class, and they are appended to a XUL <hbox> next to a
XUL <description>.

When the <hbox> is over-constrained (narrow pane, wrapping description), XUL
box layout shrinks all children proportionally down to their XUL minimum size.
For the HTML <button> the XUL minimum size does not include the button's
text content, so the box happily shrinks it below its label width; the label
then overflows the button border.

The .button-small rule in mail/themes/shared/mail/accountManage.css sets
only min-block-size, leaving the inline (width) minimum unconstrained.

Fix

Pin .button-small to min-inline-size: max-content so the XUL box cannot
shrink these buttons below their label. The neighbouring <description>,
which can wrap, absorbs the shrink instead.

---

Patch (comm-central)

diff --git a/mail/themes/shared/mail/accountManage.css b/mail/themes/shared/mail/accountManage.css
--- a/mail/themes/shared/mail/accountManage.css
+++ b/mail/themes/shared/mail/accountManage.css
@@ -620,6 +620,11 @@ richlistitem[default="true"],
   margin-inline-start: 8px;
   font-size: 0.9em;
   min-block-size: 28px;
+  /* These buttons are HTML <button>s placed next to a wrapping <description>
+   * inside a XUL <hbox>. When the pane is narrow the over-constrained XUL box
+   * shrinks the button below its label, clipping the text. Pin the minimum
+   * inline size to the content so the box cannot shrink it past the label. */
+  min-inline-size: max-content;
   margin-block: 0;
 }

Verification

Hot-patched the installed Thunderbird 151.0 on ALT Education 11
(KDE Plasma / Wayland) and reproduced/verified via the End-to-End Encryption
pane:

• Before: with the window narrowed so the description wraps, the Russian
  "Опубликовать" label overflowed the button's right border.
• After: the label stays within the button border at the same window width.

Attach before/after screenshots when filing.

Actual results:

The "Publish" button stays wide enough for its label.

Expected results:

The label overflows the right edge of the button.

Comment 1

[Airat Makhmutov]

Attachment: fixed.png

Comment 2

[Airat Makhmutov]

Attachment: fixed.png

Comment 3

[Airat Makhmutov]

Attachment: Bug 2041627 - Keep account settings OpenPGP buttons sized to their label. r?mkmelin

In the End-to-End Encryption account settings the per-key "Publish",
expiry and remove controls are HTML <button> elements placed next to a
wrapping <description> inside a XUL <hbox>, all sharing the .button-small
class.

When the pane is narrow enough that the description wraps to a second
line, the over-constrained XUL box shrinks all of its children
proportionally. The HTML <button> reports a XUL minimum size that does
not include its text content, so the box shrinks it below its label
width and the label overflows the button border. The defect is invisible
with the short English labels and only shows up with longer localized
strings, e.g. the Russian "Publish" label.

Pin .button-small's minimum inline size to max-content so the XUL box
cannot shrink these buttons below their label; the description, which
can wrap, absorbs the shrink instead.

Comment 4

[Magnus Melin [:mkmelin]]

I can't reproduce this with the en-US strings.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/92a4db5f6467
Keep account settings OpenPGP buttons sized to their label. r=mkmelin