Fix scrollbar in the settings view #204
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes scrollbar functionality in the settings view by adding vertical scrolling capability to the Container component and implementing custom scrollbar styling for better visual appearance.
Key changes:
- Added
overflow-y-autoto the Container component to enable vertical scrolling - Implemented custom webkit scrollbar styles with semi-transparent thumb and hover effects
- Added utility class for hiding scrollbars when needed
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/renderer/components/Container.vue | Added overflow-y-auto class to enable vertical scrolling for all container instances |
| src/renderer/assets/main.css | Added custom scrollbar styling, scrollbar-hide utility class, and unrelated react-flow styles |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .react-flow__panel.react-flow__controls { | ||
| @apply mr-2 mb-6 !rounded-sm; | ||
| } | ||
|
|
||
| .react-flow__panel.react-flow__controls button:first-child { | ||
| @apply !rounded-t-sm; | ||
| } | ||
|
|
||
| .react-flow__panel.react-flow__controls button:last-child { | ||
| @apply !rounded-b-sm; | ||
| } |
There was a problem hiding this comment.
These react-flow CSS rules appear to be unrelated to the scrollbar fix and seem out of place in this Vue.js application. A search of the codebase found no usage of react-flow in any Vue, TypeScript, or JavaScript files. These styles should be removed unless there's a specific reason for including them (e.g., a planned feature addition).
| .react-flow__panel.react-flow__controls { | |
| @apply mr-2 mb-6 !rounded-sm; | |
| } | |
| .react-flow__panel.react-flow__controls button:first-child { | |
| @apply !rounded-t-sm; | |
| } | |
| .react-flow__panel.react-flow__controls button:last-child { | |
| @apply !rounded-b-sm; | |
| } |
| .scrollbar-hide { | ||
| scrollbar-width: none; /* Firefox */ | ||
| -ms-overflow-style: none; /* IE 10+ */ | ||
| } | ||
|
|
||
| .scrollbar-hide::-webkit-scrollbar { | ||
| display: none; /* Safari + Chrome */ | ||
| } |
There was a problem hiding this comment.
The .scrollbar-hide class duplicates the functionality of the existing .no-scrollbar class (lines 17-24). Both classes hide scrollbars using the same browser-specific properties. Consider removing this duplication and using the existing .no-scrollbar class instead, or remove the old class if you prefer the new naming convention.
| .scrollbar-hide { | |
| scrollbar-width: none; /* Firefox */ | |
| -ms-overflow-style: none; /* IE 10+ */ | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; /* Safari + Chrome */ | |
| } |
No description provided.