Compare commits
No commits in common. "5d66ffa1a66bc7d45b22c2e317d7471d2ebb387d" and "3e2e440d06f003b41e9c72fdcf302bdc61167b4e" have entirely different histories.
5d66ffa1a6
...
3e2e440d06
2 changed files with 0 additions and 23 deletions
|
|
@ -205,24 +205,6 @@ June 20, 2026
|
||||||
- Verified all templates have proper structure
|
- Verified all templates have proper structure
|
||||||
- Tested that pages render correctly
|
- 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
|
## Design Decisions
|
||||||
|
|
||||||
### Why This Approach?
|
### Why This Approach?
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
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;
|
||||||
|
|
@ -135,7 +134,6 @@
|
||||||
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 */
|
||||||
|
|
@ -144,14 +142,11 @@
|
||||||
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 */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue