1856191 - don't restrict the sidebar width so much (to better support non-English locales)

Status: RESOLVED FIXED

(Firefox :: Firefox View, enhancement, P3)

Description

[Sören Hentzschel]

Attachment: screenshot (German)

The sidebar of Firefox View Next has a fixed width. While it works for English, it causes in some languages that some categories will be on one line and others on two lines. I think it would look better if every category could fit into one line, like in English. And since there is a very, very large gap between the sidebar and the main content, it doesn't seem to be necessary to restrict the sidebar width so much.

Comment 1

[:Gijs (he/him)]

I understand why this was filed as an enhancement but I think having it be a defect is more likely to get it triaged, and I think the clunky German rendering is arguably just a defect as-is.

Comment 2

[Morgan Reschenberg [:morgan]]

This likely means the sidebar won't work with increased text sizes, so triaging as a11y s2 accordingly.

Comment 3

[BugBot [:suhaib / :marco]]

The severity field for this bug is set to S4. However, the accessibility severity is higher, .
:kcochrane, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 4

[Kelly Cochrane [:kcochrane]]

(In reply to Morgan Reschenberg [:morgan] from comment #2)

This likely means the sidebar won't work with increased text sizes, so triaging as a11y s2 accordingly.

Hmm why do we think that :morgan? Whenever I try increasing the text size, the sidebar still works fine, it just wraps text in the buttons to new line(s).

Comment 5

[Morgan Reschenberg [:morgan]]

(In reply to Kelly Cochrane [:kcochrane] from comment #4)

(In reply to Morgan Reschenberg [:morgan] from comment #2)

This likely means the sidebar won't work with increased text sizes, so triaging as a11y s2 accordingly.

Hmm why do we think that :morgan? Whenever I try increasing the text size, the sidebar still works fine, it just wraps text in the buttons to new line(s).

Hmm, I thought that was the issue described here -- that the text splits to multiple lines when it should stay on a single line for presentation reasons. Maybe I'm misunderstanding the bug

Comment 6

[Kelly Cochrane [:kcochrane]]

:morgan the text breaks to multiple lines by design, we just initially only made it wide enough to accommodate English translations.

After speaking with the UX team, they'd like to increase the max-width of the sidebar component in Firefox View to 260px to accommodate languages such as German. The sidebar will still wrap text if text size is increased or if using other languages with longer translations. As far as I can tell, this shouldn't break functionality of the sidebar navigation.

The variable used for this is here

Comment 7

[Kelly Cochrane [:kcochrane]]

To help Mozilla out with this bug, here's the steps:

1. Comment here on the bug that you want to volunteer to help.
      This will tell others that you're working on the next steps.
2. Download and build the Firefox source code
      * If you have any problems, please ask on
        Element/Matrix
        in the #introduction channel. They're there to help you get started.
      * You can also read the
        Firefox Contributors' Quick Reference,
        which has answers to most development questions.
3. Start working on this bug.
      * If you have any problems with this bug,
        please comment on this bug and set the needinfo flag for me.
        Also, you can find me and my teammates on the Firefox View channel on
        Element/Matrix
        most hours of most days.
4. Build your change with mach build and test your change with
      mach test browser/components/firefoxview/tests/.
      Also check your changes for adherence to our style guidelines by using mach lint
5. Submit the patch (including an automated test, if applicable) for review.
      Mark me as a reviewer so I'll get an email to come look at your code.
      * Getting your code reviewed
      * This is when the bug will be assigned to you.
6. After a series of reviews and changes to your patch,
      I'll mark it for checkin or push it to autoland.
      Your code will soon be shipping to Firefox users worldwide!
7. ...now you get to think about what kind of bug you'd like to work on next.
      Let me know what you're interested in and I can help you find your next contribution.

Comment 8

[Sam Foster [:sfoster] (he/him)]

I linked bug 1911361 as though its a different UI surface its a similar problem and I'd like to track it. The layout size unit is orthogonal to the localization problem (longer or more words) here and the fix in comment 6 stands.

Comment 9

[konyhéa]

Hii, I’m Konyhea an outreachy intern and I would love to fix this.

Comment 10

[konyhéa]

Hi, I'd like to volunteer to work on this bug. Before proceeding, I noticed that the current value
of --fxview-sidebar-width in firefoxview.css is already set to 288px, which is higher than the requested 260px mentioned in the previous comment. Here is the variable used.

Comment 11

[Kelly Cochrane [:kcochrane]]

Oh yes! (In reply to konyhéa from comment #10)

Hi, I'd like to volunteer to work on this bug. Before proceeding, I noticed that the current value
of --fxview-sidebar-width in firefoxview.css is already set to 288px, which is higher than the requested 260px mentioned in the previous comment. Here is the variable used.

Ah yes you're right! Sorry it looks like this bug is no longer valid since we've already increased the sidebar width. Thanks for pointing this out, :konyhéa!

Comment 12

[Sören Hentzschel]

Attachment: screenshot

Sorry it looks like this bug is no longer valid since we've already increased the sidebar width.

This is still an issue. The attached screenshot is from Firefox Nightly 150.0a1 (2026-03-23).

Comment 13

[Kelly Cochrane [:kcochrane]]

Thanks Sören. Unfortunately, that translated string can be quite long, so for some languages we may need to allow it to wrap. I'll reach out to UX on this to see if there's anything we can do.

Comment 14

[Sören Hentzschel]

The string isn't really that long, and there's a ton of empty space (depending on my window width, approx. between 200 and 300px!) between the sidebar and the content, for no obvious reason. So it should be easy to give the strings at least some more space. It's okay for the text to wrap on smaller screens. But on desktop-sized screens, it doesn't make sense not to use the available space.

Comment 15

[Kelly Cochrane [:kcochrane]]

I'm working with UX to see if we can add another breakpoint for when the window is wider.

Comment 16

[Kelly Cochrane [:kcochrane]]

Reopening this

Comment 17

[Kelly Cochrane [:kcochrane]]

Okay after working with UX on this, we should add the following breakpoint in firefox.css after the existing one. It should change the width variable to 320px if the window is at least 72rem wide

Comment 18

[konyhéa]

Attachment: Bug 1856191 - don't restrict the sidebar width so much (better support non-English locales)

Comment 19

[konyhéa]

Hii, I have submitted a patch for review on Phabricator:
https://phabricator.services.mozilla.com/D289320 (In reply to Kelly Cochrane [:kcochrane] from comment #17)

Okay after working with UX on this, we should add the following breakpoint in firefox.css after the existing one. It should change the width variable to 320px if the window is at least 72rem wide

Comment 20

[konyhéa]

Hii, I have submitted a patch for review on Phabricator:
https://phabricator.services.mozilla.com/D289320 (In reply to Kelly Cochrane [:kcochrane] from comment #17)

Okay after working with UX on this, we should add the following breakpoint in firefox.css after the existing one. It should change the width variable to 320px if the window is at least 72rem wide

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ee05c739437a
https://hg.mozilla.org/integration/autoland/rev/dbc27ca30a0e
don't restrict the sidebar width so much (better support non-English locales) r=kcochrane

Comment 22

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/dbc27ca30a0e