Always show scrollbars in tab panels when content overflows - Githubissues

Automattic / studio

Studio by WordPress.com, a free desktop app that helps developers streamline their local WordPress development workflow.

https://developer.wordpress.com/studio/

GNU General Public License v2.0

138 stars 12 forks source link

Always show scrollbars in tab panels when content overflows #255

Closed fluiddot closed 1 week ago

fluiddot commented 1 week ago

Related to https://github.com/Automattic/studio/pull/225#issuecomment-2172736451.

Proposed Changes

Override tab panel styles to customize the scrollbar. This is the same approach we used for the sidebar but using different colors.

https://github.com/Automattic/studio/assets/14905380/4a966249-09d6-4998-8e6c-de92b6ce1146

Testing Instructions

Open the app.
Resize the window to the minimum size.
Navigate to the Settings tab.
Observe the content overflows.
Observe the scrollbar is always displayed.
Observe the content can be scrolled.

Pre-merge Checklist

[ ] Have you checked for TypeScript, React or other console errors?

fluiddot commented 1 week ago

@matt-west For the scrollbar color, I've used the same one the macOS was showing. For the hover state, I simply made the color 20% darker. Let me know if you'd like to adjust the colors before merging. Thanks 🙇 !