Chromebook page download links are obscured on mobile

[alexgibson]

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

1. Open https://www.mozilla.org/en-US/firefox/browsers/chromebook/ on a mobile device (or resize your desktop browser).
2. 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]

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]

I believe this has been fixed by #14653

[janbrasna]

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 mozilla/protocol#675 replacing hero/feature w generic block and could't find any mention of it, just this related bit mozilla/protocol#360 (comment):

"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.

[stephaniehobson]

Fixed in #14653