1705177 - UI issue in AST locale in Responsive design mode > (open Device picker) > Edit List... > Add Custom Device

Status: NEW

(DevTools :: Responsive Design Mode, defect, P3)

Description

[enolp]

Attachment: mozilla.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Right now I'm reviewing the whole "ast" locale translations for Firefox Desktop and I found a bug on IU in different parts of the browser.

When "Clear Recent History" is open, "Offline Website Data" checkbox string is weirdly displayed as you can see in the screenshot. This issue also occurs in "Settings for Clearing History", here "Offline Website Data" exceeds the boundaries of the window.

However, buttons are also affected: "Save" and "Cancel" buttons are not centered and each container(?) is not responsive under "Responsive design mode > Device Settings > Add Custom Device".

I tried to change the value of "sanitize-prefs-style" to width: 30em on Pontoon, but I don't see any change for the first and second issue.

Expected results:

Text should be nicely shown regardless its length

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Responsive Design Mode' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Hi enolp, RDM & Firefox UI will probably be handled separately so I cloned your bug as Bug 1705370 to track the issues in the Firefox UI.

Can you share a screenshot of the issue in RDM as well?
Thanks

Comment 3

[Julian Descottes [:jdescottes]]

Also if we find more issues regarding the ast locale, it might be worth filing a meta bug and keep individual bugs for each individual UI issue that was found.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: image.png

Here's what I can see on AST Nightly (https://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central-l10n/firefox-89.0a1.ast.mac.dmg)

We can see that the cancel button text overflows the container.

Keeping the need-info in case there are other RDM issues than those 2 buttons.

Comment 5

[Julian Descottes [:jdescottes]]

The button's width is hardcoded to 60px at https://searchfox.org/mozilla-central/rev/0b90e582d2f592a30713bafc55bfeb0e39e1a1fa/devtools/client/responsive/index.css#703-706

Comment 6

[enolp]

Hi, I've just read all your replies.

At the moment, I didn't find more issues regarding the UI but I'll make a metabug if I find more.

I'll will upload screenshots to "RDM" but first, I need to know what "RDM" is/means, sorry for the ignorance.

Comment 7

[Julian Descottes [:jdescottes]]

Sorry for using the acronym, RDM is Responsive Design Mode. No need for additional screenshots though, the one from Comment 4 should be enough.

Comment 9

[Aparna Ojha]

Hi,
I am interested in working on this issue. Could you confirm if it is still relevant and unassigned? If yes, can I take it up?
Thanks!
Aparna Ojha

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Aparna Ojha from comment #9)

Hi,
I am interested in working on this issue. Could you confirm if it is still relevant and unassigned? If yes, can I take it up?
Thanks!
Aparna Ojha

Hello, thanks for offering help!
The bug is now yours, let us know if you have any question, either here, or on https://matrix.to/#/#devtools:mozilla.org

Comment 11

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.