1853316 - The review checker sidebar border is cut off

Status: VERIFIED FIXED

(Firefox :: Shopping, defect, P1)

Description

[Peter Magyari (Desktop QA)]

Attachment: Screenshot 2023-09-15 at 13.31.13.png

Found in

• 119.0a1 (2023-09-14)

Affected versions

• 119.0a1 (2023-09-14)

Tested platforms

• Affected platforms: All

Preconditions

• browser.shopping.experience2023.enabled: true
• browser.shopping.experience2023.optedIn: 1

Steps to reproduce

1. Open a random amazon product page.
2. Check the review checker sidebar.

Expected result

• The border of the review checker sidebar goes all the way to the bottom.

Actual result

• The border is cut off at the bottom.

Regression

• This is a very recent regression. I'm going to run mozregression and add the result ASAP.

Comment 1

[Peter Magyari (Desktop QA)]

Mozregression came up with: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=38b6d0fc67fc7b49e00ec506804e5acbf1cd5a68&tochange=a654205d84701ba611f22f0020be612e0db887c6

I believe the regressor might be Bug 1852302.

Comment 2

[kpatenio]

The issue occurs from removing position: fixed, which the regressing bug does. Restoring position: fixed or using position: absolute will fix the cut off.

We have Bug 1852141 advising against using position: fixed due to issues with scrollbars documented in Bug 1851657 (we should use position: absolute instead). Concerning the latter bug, it was filed when the sidebar header still had an icon, and I believe the issue improved after removing it.

I tested with the browser toolbox, and it seems that even with position: absolute or not, I can't scroll horizontally if zoomed in to the onboarding card. Works fine though with the main sidebar content. Therefore, we can probably use position: absolute if that's a quicker and easier solution for us to settle on before the end of 119? The issues with the onboarding card will need to be resolved by the onboarding team separately.

Comment 3

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

:niklas, since you are the author of the regressor, bug 1852302, could you take a look?

For more information, please visit BugBot documentation.

Comment 4

[:Gijs (he/him)]

We could alternatively fix this by setting the border on the shopping-sidebar element rather than from within the shopping.html document / inner content.

Another option might be (untested) to set a min-height of 100vh instead of 100% for the container on which the border is set.

Comment 5

[:Gijs (he/him)]

Attachment: Bug 1853316 - move shopping sidebar border into main browser CSS instead of inside the shopping page, r?#shopping-reviewers

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d367b7a43e8f
move shopping sidebar border into main browser CSS instead of inside the shopping page, r=shopping-reviewers,desktop-theme-reviewers,dao,kpatenio

Comment 7

[Narcis Beleuzu [:NarcisB]]

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

Comment 8

[Peter Magyari (Desktop QA)]

Verified fixed using Firefox Nightly 119.0a1 (20230920005018) on MacOS 11.6, Windows 10 and Ubuntu 20.04.