ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): prevent navigation overflow on zoom and small screens

Browse source 
- 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.
This commit is contained in:
ijuanes 2026-06-20 01:41:28 +01:00
parent 3e2e440d06
commit 26b77cf0e9
1 changed files with 5 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
templates/base.html
View file

@ -10,6 +10,7 @@
margin: 0; margin: 0;
padding: 20px; padding: 20px;
background-color: #f5f5f5; background-color: #f5f5f5;
overflow-x: hidden; /* Prevent horizontal overflow on zoom */
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
@ -134,6 +135,7 @@
max-width: 100%; max-width: 100%;
padding: 1rem; padding: 1rem;
margin: 0 auto; margin: 0 auto;
overflow: hidden; /* Prevent horizontal overflow */
} }
/* Navigation - stack vertically on mobile */ /* Navigation - stack vertically on mobile */
@ -142,11 +144,14 @@
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
flex-wrap: wrap;
} }
.nav a { .nav a {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
flex: 1 1 auto;
min-width: 120px;
} }
/* Tables - responsive with horizontal scroll */ /* Tables - responsive with horizontal scroll */