diff --git a/docs/RESPONSIVE_CSS.md b/docs/RESPONSIVE_CSS.md index 739a915..7b3b84f 100644 --- a/docs/RESPONSIVE_CSS.md +++ b/docs/RESPONSIVE_CSS.md @@ -205,24 +205,6 @@ June 20, 2026 - Verified all templates have proper structure - 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 ### Why This Approach? diff --git a/templates/base.html b/templates/base.html index 3382ed4..3dbf0c0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,6 @@ margin: 0; padding: 20px; background-color: #f5f5f5; - overflow-x: hidden; /* Prevent horizontal overflow on zoom */ } .container { max-width: 1200px; @@ -135,7 +134,6 @@ max-width: 100%; padding: 1rem; margin: 0 auto; - overflow: hidden; /* Prevent horizontal overflow */ } /* Navigation - stack vertically on mobile */ @@ -144,14 +142,11 @@ flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; - flex-wrap: wrap; } .nav a { padding: 0.75rem 1rem; text-align: center; white-space: nowrap; - flex: 1 1 auto; - min-width: 120px; } /* Tables - responsive with horizontal scroll */