Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 33 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: Adjust navigation height and padding for improved layout and responsiveness
All checks were successful
Deploy Development / deploy (push) Successful in 54s
Details
Build Test / lint-backend (push) Successful in 0s
Details
Build Test / build-frontend (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Lars 2026-04-05 12:16:24 +02:00
parent 6e952f9277
commit fdaf4471da
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/app.css
View File

@ -12,7 +12,9 @@
--accent-dark: #0a5c43; --accent-dark: #0a5c43;
--danger: #D85A30; --danger: #D85A30;
--warn: #EF9F27; --warn: #EF9F27;
--nav-h: 64px; /* Höhe der eigentlichen Tab-Zeile (ohne Abstand/Home-Indicator) */
--nav-h: 56px;
--nav-pad-top: 8px;
--header-h: 52px; --header-h: 52px;
--font: system-ui, -apple-system, 'Segoe UI', sans-serif; --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
--capture-content-max: 800px; --capture-content-max: 800px;
@ -36,25 +38,35 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
position: sticky; top: 0; z-index: 10; position: sticky; top: 0; z-index: 10;
} }
.app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } .app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.app-main { flex: 1; overflow-y: auto; padding: 16px 16px calc(var(--nav-h) + 16px); } /* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */
.app-main {
flex: 1;
overflow-y: auto;
padding: 16px 16px calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px);
}
.bottom-nav { .bottom-nav {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); position: fixed;
width: 100%; max-width: 600px; bottom: 0;
height: var(--nav-h); left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 600px;
display: flex; display: flex;
align-items: stretch; align-items: center;
background: var(--surface); background: var(--surface);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
z-index: 20; z-index: 20;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: visible;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
justify-content: flex-start; justify-content: flex-start;
gap: 2px; gap: 2px;
padding: 0 6px; padding: var(--nav-pad-top) 6px env(safe-area-inset-bottom, 0px);
min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px));
height: auto;
box-sizing: border-box; box-sizing: border-box;
} }
.bottom-nav::-webkit-scrollbar { .bottom-nav::-webkit-scrollbar {
@ -73,7 +85,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: color 0.15s; transition: color 0.15s;
padding: 0 4px calc(4px + env(safe-area-inset-bottom, 0)); padding: 2px 4px 4px;
box-sizing: border-box; box-sizing: border-box;
} }
.nav-item span { .nav-item span {