MacOS - Safari - Show scroll bars always - Word wrap

[mathieu-lessard]

Provide a general summary of the issue here

If you:

• Use MacOS
• Use General > Appearance > Show scroll bars: Always
• Use Safari
• Have a menu with a scrollbar
• All the items in the menu are of similar length

Most items in the menu will word wrap.

🤔 Expected Behavior?

Menu's items shouldn't look drastically different when scrolling vs scrollbar always showing.

😯 Current Behavior

Setting:

Menu in Safari:

Menu in Safari with "When scrolling" setting:

Menu in Chrome with "Always" setting:

💁 Possible Solution

If it's detectable that the user is on MacOS, Safari, and has Show scroll bars always, increase the width by the extra pixels required for the different scrollbar.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Be on Mac.
2. Go to System Preferences > General > Appearance > Show scroll bars. Select "Always".
3. Open Safari.
4. Go to: https://codesandbox.io/p/sandbox/spectrum-safari-scroll-bar-issue-9g9j5y?file=%2Fsrc%2FApp.js%3A21%2C37
5. Ensure the window is small enough that a scrollbar will appear.
6. Open the "Same Length" menu.

Version

3.35.0

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

macOS Monterey

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response