docs(ui): document navigation overflow fix in RESPONSIVE_CSS.md
- Add section for navigation overflow on zoom bug and fix - Document symptoms, changes, and results - Keep documentation up to date with all fixes
This commit is contained in:
parent
26b77cf0e9
commit
5d66ffa1a6
1 changed files with 18 additions and 0 deletions
|
|
@ -205,6 +205,24 @@ June 20, 2026
|
||||||
- Verified all templates have proper structure
|
- Verified all templates have proper structure
|
||||||
- Tested that pages render correctly
|
- Tested that pages render correctly
|
||||||
|
|
||||||
|
### Navigation Overflow on Zoom
|
||||||
|
**Issue:** Navigation buttons (Home, Add Tablet, Add User, etc.) overflow through the right margin when zooming in on the page.
|
||||||
|
|
||||||
|
**Fix:** Added overflow constraints to prevent horizontal scrolling (commit `26b77cf`).
|
||||||
|
|
||||||
|
**Changes:**
|
||||||
|
- Added `overflow-x: hidden` to `body` element
|
||||||
|
- Added `overflow: hidden` to `.container` element
|
||||||
|
- Added `flex-wrap: wrap` to `.nav` in mobile-first styles
|
||||||
|
- Added `flex: 1 1 auto` and `min-width: 120px` to `.nav a` for proper wrapping
|
||||||
|
|
||||||
|
**Result:**
|
||||||
|
- Navigation buttons now wrap properly on all screen sizes
|
||||||
|
- No horizontal overflow when zooming in
|
||||||
|
- Buttons remain usable and visible at all zoom levels
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Design Decisions
|
## Design Decisions
|
||||||
|
|
||||||
### Why This Approach?
|
### Why This Approach?
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue