I can reproduce by applying a diff like this to en-US:
-content-blocking-reload-description = You will need to reload your tabs to apply these changes.
+content-blocking-reload-description = You will need to reload your tabs to apply these changes. This should be quite a long string and I don't know why that makes a diff.
- .label = Reload All Tabs
+ .label = Reload All Tabs Also this button.
.accesskey = R
In other words, just make the button and text strings longer.
The issue seems to be that the
<description> containing the long-form instructional text is set to have a fixed width of 318px (unsure what that number is about?), and the button has a min-width of 150px. Without a
flex-shrink: 0 on the button, that shrinks to its min-width from its preferred width in order to accommodate the maximum width of the container, and the text overflows.
A simple change that just keeps the text more readable is to remove some containers and use
align-items: center on the container, and using
flex-shrink: 0 on the button. Of course, then the button juts out because now the entire button overflows the flex container.
It feels like it should be possible to strip out all the containers and be left with:
<button class="accessory-button reload-tabs-button"
flex-align: center the button,
flex-align: start the image, and have the flex container take the height of the
<span>. However, that doesn't actually work - the message ends up overflowing at the bottom. I don't know why the container height of the
html:div doesn't adapt for the size of the span after it gets wrapped (because that's what happens in a simpel HTML testcase), but it doesn't. I'd needinfo Dan but he's out.
Anyway, even if we do all that, the result is pretty ugly because the button is quite wide and so the text ends up having to wrap in a very narrow space in order to fit next to the button. The simplest solution here would be redesigning this so the message is above the button (perhaps centering the button underneath it). Eric, would that be acceptable?