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:
@@ -1,3 +0,0 @@
|
||||
there is a scroll bar on the right that looks gross. also a horizontal scroll bar that should come out
|
||||
|
||||
story needs to be worked through
|
||||
27
.living_spec/stories/archive/09_remove_scroll_bars.md
Normal file
27
.living_spec/stories/archive/09_remove_scroll_bars.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# Story: Remove Unnecessary Scroll Bars
|
||||
|
||||
## User Story
|
||||
**As a** User
|
||||
**I want** the UI to have clean, minimal scrolling without visible scroll bars
|
||||
**So that** the interface looks polished and doesn't have distracting visual clutter.
|
||||
|
||||
## Acceptance Criteria
|
||||
* [x] Remove or hide the vertical scroll bar on the right side of the chat area
|
||||
* [x] Remove or hide any horizontal scroll bars that appear
|
||||
* [x] Maintain scrolling functionality (content should still be scrollable, just without visible bars)
|
||||
* [x] Consider using overlay scroll bars or auto-hiding scroll bars for better aesthetics
|
||||
* [x] Ensure the solution works across different browsers (Chrome, Firefox, Safari)
|
||||
* [x] Verify that long messages and tool outputs still scroll properly
|
||||
|
||||
## Out of Scope
|
||||
* Custom scroll bar designs with fancy styling
|
||||
* Touch/gesture scrolling improvements for mobile (desktop focus for now)
|
||||
|
||||
## Implementation Notes
|
||||
* Use CSS `scrollbar-width: none` for Firefox
|
||||
* Use `::-webkit-scrollbar { display: none; }` for Chrome/Safari
|
||||
* Ensure `overflow: auto` or `overflow-y: scroll` is still applied to maintain scroll functionality
|
||||
* Test with long tool outputs and chat histories to ensure no layout breaking
|
||||
|
||||
## Related Functional Specs
|
||||
* Functional Spec: UI/UX
|
||||
Reference in New Issue
Block a user