1575604 - Align the search field to the left of login-item

Status: RESOLVED FIXED

(Firefox :: about:logins, task, P1)

Description

Making the following updates to the positioning and behavior of elements within the header bar of logins and passwords:

Design: https://mozilla.invisionapp.com/share/EJRHBMEDKF8#/380121226_Lockwise_Desktop_Home_-_Min-Width
Zeplin: https://zpl.io/2yWd76o

Tasks:

• Set min-width of entire area to 1100px
• Set width of search area to 400px, lock left side of search field to align with login details column (consider setting min-width of 320px to account for longer email addresses, or truncate email address in instances where it's too long)
• Font weight of FxA email address is too bold. Match to spec (semibold)
• Make entire FxA section clickable, rather than just account avatar
• Consider not stacking FxA sync and button copy to multiple lines (default to horizontal scroll sooner... may be worth some discussion)

this pairs well with what also needs to be handled in the main content area:

• change max-width of content area to 700px (currently 798px)

Comment 1

[Matthew N. [:MattN]]

P1 according to Ryan's doc.

Comment 2

[Matthew N. [:MattN]]

(In reply to rgaddis from comment #0)

• Consider not stacking FxA sync and button copy to multiple lines (default to horizontal scroll sooner... may be worth some discussion)

It seems like the spec still shows wrapping so can we move this to another bug.

Set min-width of entire area to 1100px

Eventually we want the page to be responsive for a sidebar view so this doesn't align with that plan longer term.

Since we addressed 3 of the 5 remaining issues then I think this should be lower priority. The centering of the search box was shorlander's suggestion. Let me know if you disagree.

Comment 3

[rgaddis]

I agree with you on two out of three (and updated the strikethrough accordingly), but would like the search updated as specified to align with the left side, even if it causes a horizontal break sooner. We can reduce the max width of the search bar to help alleviate some of this.

Comment 4

[Tim Nguyen :ntim]

Attachment: Bug 1575604 - Align the search field to the left of login-item. r=jaws

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f0237adbd823
Align the search field to the left of login-item. r=jaws

Comment 6

[Bogdan Tara[:bogdan_tara | bogdant]]

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