sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Mobile optimizations - responsive layout with bottom nav

Browse Source
This commit is contained in:
Mistral Vibe
2026-04-07 12:27:32 +00:00
parent fdf9f52f6f
commit 21c1673fcc
11 changed files with 1088 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/index.css
View File

@@ -34,3 +34,39 @@ input, textarea, button, select {
--danger: #e07070;
--danger-bg: rgba(220,80,80,0.1);
}
/* ── Responsive Layout ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Ensure main content doesn't overlap bottom nav */
body {
padding-bottom: 60px; /* Height of bottom nav */
}
}
/* Bottom Navigation Bar */
nav[style*="position: fixed"] {
display: flex;
background: #0b0b0e;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 8px 16px;
}
/* Bottom Nav Items */
button[style*="flex-direction: column"] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
background: transparent;
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
transition: color 0.12s;
}
button[style*="flex-direction: column"][style*="color: rgb(232, 162, 42)"] {
color: #e8a22a;
}