Chromebook page download links are obscured on mobile

alexgibson commented 1 year ago

Description

When viewing the Chromebook page on mobile, when you click the "Get Firefox for Chromebook" drop down, the options are obscured by overlapping content.

Steps to reproduce

Open https://www.mozilla.org/en-US/firefox/browsers/chromebook/ on a mobile device (or resize your desktop browser).
Click "Get Firefox for Chromebook"

Expected result

The options inside the drop down should be accessible.

Actual result

The options are obscured. See screenshot below and note the double scroll bars:

Environment

Any browser

craigcook commented 1 year ago

Looks like hidden overflow on the Split component: https://github.com/mozilla/protocol/blob/main/assets/sass/protocol/components/_split.scss#L11

It might be harmless to just remove it, but if the hidden overflow is still needed for some other layout reasons in the component we might have to do a custom override for this page.

wen-2018 commented 3 months ago

I believe this has been fixed by https://github.com/mozilla/bedrock/pull/14653

janbrasna commented 3 months ago

Yes, resolving #14491 in general also fixes this for mobile.

However the good question is, whether that shouldn't have been changed for any occurrence upstream in Protocol? I see it's there from the beginning of Split component https://github.com/mozilla/protocol/pull/675 replacing hero/feature w generic block and could't find any mention of it, just this related bit https://github.com/mozilla/protocol/pull/360#issuecomment-567157324:

"I expected us to have overflow-x:hidden on body but we don't. I assume it's for a good reason. That means this component needs to safe guard against a crawl bar. I think that means it can't be nested in mzp-l-content."

So it might need a more info from the author whether it's viable to remove in Protocol or the local override for any cropped UI is safer.

mozilla / bedrock