From 26b77cf0e92e23d7aeac7365f007dfb8a035772d Mon Sep 17 00:00:00 2001
From: ijuanes <ijuanes@hackercachy>
Date: Sat, 20 Jun 2026 01:41:28 +0100
Subject: [PATCH 1/2] fix(ui): prevent navigation overflow on zoom and small
 screens

- Add overflow-x: hidden to body to prevent horizontal scroll on zoom
- Add overflow: hidden to .container to prevent margin overflow
- Ensure .nav a has flex: 1 1 auto and min-width: 120px for proper wrapping
- Fixes issue where navigation buttons overflow through right margin when zoomed in

This ensures the navigation bar wraps properly and doesn't cause horizontal
scrolling or overflow issues on any screen size or zoom level.
---
 templates/base.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/templates/base.html b/templates/base.html
index 3dbf0c0..3382ed4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,7 @@
             margin: 0;
             padding: 20px;
             background-color: #f5f5f5;
+            overflow-x: hidden; /* Prevent horizontal overflow on zoom */
         }
         .container {
             max-width: 1200px;
@@ -134,6 +135,7 @@
             max-width: 100%;
             padding: 1rem;
             margin: 0 auto;
+            overflow: hidden; /* Prevent horizontal overflow */
         }
 
         /* Navigation - stack vertically on mobile */
@@ -142,11 +144,14 @@
             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 */

From 5d66ffa1a66bc7d45b22c2e317d7471d2ebb387d Mon Sep 17 00:00:00 2001
From: ijuanes <ijuanes@hackercachy>
Date: Sat, 20 Jun 2026 01:42:29 +0100
Subject: [PATCH 2/2] 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
---
 docs/RESPONSIVE_CSS.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/RESPONSIVE_CSS.md b/docs/RESPONSIVE_CSS.md
index 7b3b84f..739a915 100644
--- a/docs/RESPONSIVE_CSS.md
+++ b/docs/RESPONSIVE_CSS.md
@@ -205,6 +205,24 @@ 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?