1579108 - [Linux] The "Copy" buttons of the username and password fields are not aligned

Status: VERIFIED FIXED

(Firefox :: about:logins, defect, P3)

Description

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Attachment: Screenshot from 2019-09-06 18-08-32.png

[Notes]:

• The issue is not reproducible on Windows and Mac OS.

[Affected Platforms]

• Ubuntu 18.04
• Ubuntu 16.04

[Steps to reproduce]:

1. Open the latest Nightly browser and navigate to "about:logins" page.
2. Click the "Create New Login" button.
3. Enter a valid Website Address.
4. Enter a short username and password and click the "Save" button.
5. Observe the "Copy" buttons of the username and password fields.

[Expected results]:

• The buttons are aligned.

[Actual results]:

• The buttons are not aligned.

[Additional Notes]:

• Attached a screenshot with the issue.

Comment 1

[Tim Nguyen :ntim]

This wasn't reproducible on Fedora, so this could be Ubuntu specific.

I'm guessing the widget code on Ubuntu is giving a larger default width for inputs on Ubuntu which could be causing this.

Comment 3

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

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 4

[Matthew N. [:MattN]]

Mass removing [skyline] and [passwords:management] from about:logins bugs which are no longer useful.

Comment 5

[kenrick95]

This issue is from using the font called "Ubuntu" (it is the default font in Ubuntu OS). I can reproduce it on Windows too if I set the page's default font-family using "Ubuntu" font

Comment 6

[kenrick95]

Attachment: Bug 1579108 - Change the form in login-item to grid so that the copy buttons can reliably align

Implementing grid layout using flex may sometimes triggers edge cases where some columns go out of alignment. In this bug, the misalignment is due to the different length value given by -moz-available when Ubuntu font is used on the page.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8e5172537013
Change the form in login-item to grid so that the copy buttons can reliably align r=sfoster,ntim

Comment 8

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/8e5172537013

Comment 9

[Cosmin Muntean [:cmuntean], Ecosystem QA]

I have verified this issue on the latest Nightly 86.0a1 (Build ID: 20210111215143) on Ubuntu 20.04 x64 and Linux Mint 20.

• The "Copy" buttons are correctly aligned. I have also verified if both "Copy" buttons are correctly aligned if the username or password has a very long string.

I have also verified these changes on Windows 10 x64 and macOS 10.15.6 and now the "Copy" buttons are correctly aligned if the password is longer than the username.