1851839 - Sidebar close button alignment issues and header fixed to the top

Status: VERIFIED FIXED

(Firefox :: Shopping, defect, P2)

Description

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

The close button is right-aligned to the cards below it, which looks funny on hover or when there is a visible scrollbar.

Comment 1

[kpatenio]

According to the Figma, the header is supposed to be fixed to the top of the sidebar while scrolling. Currently, the header does not behave this way. I think addressing that will facilitate how we align the close button.

Comment 2

[kpatenio]

Attachment: Bug 1851839 - keep shopping sidebar header position fixed and fix close button alignment

Comment 3

[kpatenio]

Some new updates/info:

• while removing the header icon + reducing font size improved the close button alignment, it's not perfectly aligned in some instances. I'm thinking all we need to do to fix this is adjust button margin and header box-sizing
• the header is also supposed to be positioned/stickied to the top of the sidebar, even when there's overflow

This ticket was originally meant for fixing the close button alignment only, but I accidentally went out of scope in my first patch. Given these new details, however, I think it's best to simply repurpose the ticket for the changes I mentioned above

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c5416c06c567
keep shopping sidebar header position fixed and fix close button alignment r=desktop-theme-reviewers,shopping-reviewers,niklas

Comment 5

[Narcis Beleuzu [:NarcisB]]

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

Comment 6

[Peter Magyari (Desktop QA)]

I have verified the fix using Firefox Nightly 119.0a1 (20230924092410) on Windows 10, MacOS 11 and Ubuntu 20.04 and can also confirm that this indeed fixed Bug 1854427 as well, the header does stay on-top accordingly.