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

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