Focus outline in media type selection dropdown is cropped on the right

[dhruvkb]

Description

The focus outline in the media type selection dropdown is cropped from the right side.

Reproduction

1. Search for something.
2. Using the keyboard navigate to the media type selection dropdown.
3. Move the selection up and down.
4. See incorrect focus outline.

Screenshots

Environment

• Device: MacBook Pro M1
• OS: macOS Ventura 13.1
• Browser: Firefox
• Version: 109.01

Additional context

This seems to be browser-specific because it cannot be reproduced in Safari.

[obulat]

I'm on Firefox 110.0.1 (64-bit) 111.0 (64-bit) (all other environment properties are the same), and I can't reproduce this. Can you still see it, @dhruvkb ?

[sarayourfriend]

I also cannot reproduce it on Firefox nightly on Linux.

[dhruvkb]

I can still see it, even with Firefox 111.0 64-bit (same as @obulat), but since most of you don't, I am starting to suspect it might be an issue with my setup. Let's drop this to low priority.

[dhruvkb]

Did a little investigation into why this is specific to me and I think this might be it. This behaviour only occurs when the following macOS setting is enabled.

Setting the scrollbar visibility to "Always" leads to the scrollbar-gutter CSS property in Firefox reserving a little space for the scrollbar on the edge, which then cuts off the right edge of the content. Chrome is able to handle this quite well so we can close this as a shortcoming of Firefox requiring no work from our end.