feat: Story 9 - Remove scroll bars for cleaner UI
Implemented Story 9: Hidden Scroll Bars
- Added CSS to hide scroll bars globally while maintaining functionality
- Used scrollbar-width: none for Firefox
- Used ::-webkit-scrollbar { display: none; } for Chrome/Safari/Edge
- Set overflow-x: hidden to prevent unwanted horizontal scrolling
- Maintained full scroll functionality (mouse wheel, trackpad, keyboard)
Updated Specs
- Added Scroll Bar Styling section to UI_UX.md
- Documented cross-browser compatibility requirements
- Specified areas affected and implementation approach
Bug Fixes
- Fixed biome linting issues in App.tsx (import organization, button type)
- Applied biome formatter for consistent code style
This commit is contained in:
17
src/App.css
17
src/App.css
@@ -158,3 +158,20 @@ details summary span:first-child {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Hide scroll bars globally while maintaining scroll functionality */
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge */
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Ensure scroll functionality is maintained */
|
||||
body,
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user