From 26b77cf0e92e23d7aeac7365f007dfb8a035772d Mon Sep 17 00:00:00 2001
From: ijuanes <ijuanes@hackercachy>
Date: Sat, 20 Jun 2026 01:41:28 +0100
Subject: [PATCH] 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 */