1917908 - The layout of the about:translations controls should be improved for small-width screens

Status: RESOLVED FIXED

(Firefox :: Translations, task)

Description

[Erik Nordin [:nordzilla]]

Description

Bug 1879933 introduced a new swap-languages button to the about:translations page. While the button is functional for all screen sizes, it limits the available real estate in the row with the language selector dropdown menu lists. For small screen sizes, e.g. some mobile devices, the layout does not look great.

We should improve the way that the controls are laid out on smaller-width screens.

Comment 1

[Daniel Frantes]

Hello where I can fix this?

Ps. I am working on linux notebook. Specifically I run Fedora 40.

Comment 2

[Erik Nordin [:nordzilla]]

Hi Daniel!

I apologize that notification of your comment here must have slipped past my radar.

Are you still interested in working on this?

If so, please respond and use the "Request information from" option at the bottom to need-info me, to ensure that I see it, and I'll be happy to mentor you on this.

Comment 3

[keanucuco]

Hi nordzilla, Is the swap-languages button’s functionality expected to remain the same, or are there other functional changes being considered?

Comment 4

[Erik Nordin [:nordzilla]]

Attachment: screenshot.png

The functionality would look exactly the same.

The goal here is just to update the styling in a way that it doesn't look like the attached screenshot when the screen size is small.

Comment 5

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:epavlov, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Comment 6

[Yakub Abdulrahman Alada]

Attachment: Bug 1917908 - Improve layout of the about:translations controls for small-width screens r=nordzilla

Comment 7

[keanucuco]

Attachment: Bug 1917908 - [Translations] Improve responsive layout for translations UI on small screens. r=nordzilla

Comment 8

[keanucuco]

Comment on attachment 9474295 [details] [diff] [review]
Bug 1917908 - [Translations] Improve responsive layout for translations UI on small screens. r=nordzilla

I encountered issues using Phabricator/moz-phab for this submission, so I'm attaching the patch directly to Bugzilla instead. @nordzilla

Comment 9

[Erik Nordin [:nordzilla]]

(In reply to keanucuco from comment #8)

Comment on attachment 9474295 [details] [diff] [review]
Bug 1917908 - [Translations] Improve responsive layout for translations UI on small screens. r=nordzilla

I encountered issues using Phabricator/moz-phab for this submission, so I'm attaching the patch directly to Bugzilla instead. @nordzilla

Could you please try to resolve the issues with Phabricator? I cannot review the patch on Bugzilla, since Phabricator is our review tool.

Comment 10

[keanucuco]

Attachment: Bug 1917908 - Improve responsive layout for translations UI on small screens. r=nordzilla

Comment 11

[keanucuco]

Attachment: Bug 1917908 - Improve responsive layout for translations UI on small screens. r=nordzilla

Comment 12

[keanucuco]

Attachment: Bug 1917908 - [Translations] Improve responsive layout for translations UI on small screens. r=nordzilla

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3798dfbbdb57
Improve layout of the about:translations controls for small-width screens r=nordzilla,translations-reviewers

Comment 14

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/3798dfbbdb57