feat: responsive mobile UI across all pages
Build & Deploy / build-and-deploy (push) Successful in 50s

Global:
- Viewport meta already present; added -webkit-text-size-adjust: 100%
- Container padding reduces to 12px on mobile (was 24px)
- Smaller heading sizes (h1: 1.5rem, h2: 1.25rem)
- Buttons get min-height 40px for touch targets
- Inputs forced to 16px font-size to prevent iOS zoom
- Thinner scrollbar on mobile

Header:
- Logo text shrinks to 1rem on mobile, icon to 28px
- Header padding reduces to 12px

Library:
- Toolbar stacks vertically on mobile, full-width inputs
- Grid forced to 2 columns on narrow screens (480px), reduced gap

GameCard:
- Smaller info text, padding, badge on 480px screens

GameDetail:
- Cover section capped at 200px width on mobile
- Media thumbnails shrink to 160x90
- Scrape header stacks vertically with full-width buttons
- Edit rows stack vertically on mobile

Play:
- DOS container caps at 50vh on mobile, smaller border-radius
- Overlay text/icon sizes reduced, more compact layout
This commit is contained in:
David Alvarez
2026-05-26 17:22:15 +02:00
parent 404e8b6719
commit 3ae6f43ccb
6 changed files with 64 additions and 0 deletions
+14
View File
@@ -52,6 +52,7 @@
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
body {
@@ -170,6 +171,19 @@ input::placeholder {
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 640px) {
.container { padding: 0 12px; }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE TOUCH ADJUSTMENTS
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
.btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
}
/* ═══════════════════════════════════════════════════════════════
SCROLLBAR