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:
Dave
2025-12-25 15:23:49 +00:00
parent 990441dfc1
commit ed15279dae
8 changed files with 180 additions and 77 deletions

View File

@@ -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

View 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