1908782 - Align gear button beta label in translation panel

Status: VERIFIED FIXED

(Fenix :: Translations, enhancement, P1)

Description

[Dasha Andriyenko [:Dasha]]

Steps to reproduce

1. Make your system language English
2. Open the Firefox Nightly app and navigate to it.wikipedia.org
3. Activate the translation panel. (The translations panel should pop up, or you can activate it by clicking on the translations icon in the toolbar, or by selecting the "translate" option in the application menu.)
4. Observe the placement of the gear menu relative to the text and beta label.

Expected behavior

The gear menu should be aligned with the beta label and have consistent padding as the design specifies.

Actual behavior

The gear menu is tightly placed next to the text area. Also when the title gets longer due to longer strings, the stacking looks miss-aligned with the top of the text

Device information

Firefox version: 130.0a1 (Build #2016033063)
Android device model: Galaxy S21 5G (SM-G991W)
Android OS version: 12

Any additional information?

Refer to the attached screenshots and the design files here:
https://www.figma.com/design/GT6oZLFw32LiCwKl5GOMWD/Full-Page-Translation?node-id=14254-42625&t=iR8Z5YjKVl2Wamc9-4

Comment 1

[Dasha Andriyenko [:Dasha]]

Attachment: image.png

Comment 3

[Olivia Hall [:olivia]]

Attachment: Bug 1908782 - Align gear button beta label in Android translation panel

This patch moves the gear icon to the same level as the beta label and
adjusts some padding between layers.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f0ab6e599f8f
Align gear button beta label in Android translation panel r=android-reviewers,giorga

Comment 5

[Iulian Moraru]

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

Comment 6

[miralobontiu]

Attachment: 1908782.png

Verified as fixed on the Fenix Nightly 130.0a1 build from 7/28, with Samsung Galaxy S24 (Android 14), and Lenovo TB-X606X (Android 10).

The BETA label and the settings icon are alligned as in the screenshot.