Lars/shinkan-jinkendo
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: enhance responsive design and layout in app.css
Some checks failed
Deploy Development / deploy (push) Successful in 34s
Details
Test Suite / lint-backend (push) Successful in 0s
Details
Test Suite / build-frontend (push) Successful in 6s
Details
Test Suite / playwright-tests (push) Failing after 40s
Details

Browse Source 
- Improved mobile and web-app layout by adjusting overflow properties and widths to prevent horizontal scrolling.
- Updated .app-shell and .app-main styles for better adaptability on various screen sizes.
- Refined card dimensions in the framework slots to ensure consistent sizing and scrolling behavior across devices.
This commit is contained in:
Lars 2026-05-05 12:33:09 +02:00
parent 6c87989863
commit b1af59b134
1 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/app.css
View File

@ -33,7 +33,28 @@
html, body, #root { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; }
.app-shell { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; max-width: 600px; margin: 0 auto; }
/* Mobile / Web-App: keine horizontale Seiten-Scroll-Leiste; volle Gerätebreite (<1024px) */
@media (max-width: 1023px) {
html {
overflow-x: clip;
}
body,
#root {
overflow-x: clip;
max-width: 100%;
}
}
/* Telefon & Tablet hochkant: volle Breite wie eine native App (kein 600px-Säulen-Layout) */
.app-shell {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100dvh;
width: 100%;
max-width: 100%;
margin: 0;
}
.app-header {
height: var(--header-h); display: flex; align-items: center; padding: 0 16px;
background: var(--surface); border-bottom: 1px solid var(--border);
@ -53,6 +74,9 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
/* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */
.app-main {
flex: 1;
min-width: 0;
max-width: 100%;
overflow-x: clip;
overflow-y: auto;
padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px));
}
@ -60,10 +84,10 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
.bottom-nav {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 600px;
left: 0;
right: 0;
width: auto;
max-width: none;
display: flex;
align-items: center;
background: var(--surface);
@ -1548,7 +1572,7 @@ a.analysis-split__nav-item {
}
.exercise-filter-modal.admin-modal-sheet {
max-width: min(920px, calc(100vw - 16px));
max-width: min(920px, calc(100dvw - 16px));
}
.exercise-filter-modal .admin-modal-sheet__body.exercise-filter-modal__scroll {
flex: 1;
@ -1625,7 +1649,7 @@ a.analysis-split__nav-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: min(260px, 88vw);
max-width: min(260px, 100%);
}
.exercise-filter-chip__x {
flex-shrink: 0;
@ -2045,6 +2069,8 @@ a.analysis-split__nav-item {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
}
@ -2180,17 +2206,6 @@ a.analysis-split__nav-item {
background: rgba(216, 90, 48, 0.08);
}
@media (max-width: 1023px) {
.app-shell {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100dvh;
max-width: 600px;
margin: 0 auto;
}
}
@media (min-width: 1024px) {
.app-shell {
display: block;
@ -2804,6 +2819,7 @@ a.analysis-split__nav-item {
/* Horizontaler Überblick: äußerer Scroll‑Container (Zuverlässigkeit in Flex/Grid‑Eltern) */
.framework-slots-board-outer {
container-type: inline-size;
width: 100%;
max-width: 100%;
min-width: 0;
@ -2830,10 +2846,11 @@ a.analysis-split__nav-item {
scroll-snap-type: x proximity;
}
/* Kartenbreite an den Scroll-Container koppeln (100vw wäre oft breiter als .app-main → horizontales Wischen der ganzen Seite) */
.framework-slots-board .framework-slot-card {
flex: 0 0 min(300px, calc(100vw - 56px));
width: min(300px, calc(100vw - 56px));
min-width: min(300px, calc(100vw - 56px));
flex: 0 0 min(300px, calc(100vw - 72px));
width: min(300px, calc(100vw - 72px));
min-width: min(300px, calc(100vw - 72px));
height: min(520px, 72vh);
max-height: min(520px, 72vh);
display: flex;
@ -2845,6 +2862,11 @@ a.analysis-split__nav-item {
scroll-snap-align: start;
box-sizing: border-box;
}
.framework-slots-board .framework-slot-card {
flex: 0 0 min(300px, calc(100cqw - 24px));
width: min(300px, calc(100cqw - 24px));
min-width: min(300px, calc(100cqw - 24px));
}
.framework-slot-card__head {
display: flex;