troogs/date-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: optimize mobile vertical layout and bottom clearance for continue bar

Browse Source
This commit is contained in:
troogs
2026-08-12 12:52:45 +02:00
parent 28f402674a
commit b230918903
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
activity.css
+8 -7
View File
@@ -4,7 +4,7 @@
.page-activity .intro { .page-activity .intro {
text-align: center; text-align: center;
margin-bottom: 1.5em; margin-bottom: 1.2em;
} }
.page-activity .intro p { .page-activity .intro p {
@@ -14,12 +14,13 @@
.activity-grid { .activity-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 12px;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
.activity-grid { .activity-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 16px;
} }
} }
@@ -29,9 +30,9 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 8px;
min-height: 140px; min-height: 115px;
padding: 16px 10px; padding: 12px 8px;
background: var(--color-white); background: var(--color-white);
border: 2px solid transparent; border: 2px solid transparent;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -46,14 +47,14 @@
} }
.activity-card .icon { .activity-card .icon {
font-size: 2.6rem; font-size: 2.2rem;
line-height: 1; line-height: 1;
} }
.activity-card .label { .activity-card .label {
font-family: var(--font-heading); font-family: var(--font-heading);
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.9rem;
text-align: center; text-align: center;
color: var(--color-text); color: var(--color-text);
} }
style.css
+9 -6
View File
@@ -35,6 +35,9 @@ html {
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-family: var(--font-body); font-family: var(--font-body);
font-size: clamp(1rem, 3.6vw, 1.15rem); font-size: clamp(1rem, 3.6vw, 1.15rem);
line-height: 1.5; line-height: 1.5;
@@ -64,7 +67,8 @@ p {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
margin: 0 auto; margin: 0 auto;
padding: 24px 20px 40px; padding: 20px 20px 32px;
flex: 1;
} }
/* Buttons -------------------------------------------------------------- */ /* Buttons -------------------------------------------------------------- */
@@ -160,9 +164,8 @@ p {
/* Fixed bottom bar for a primary continue action ------------------------- */ /* Fixed bottom bar for a primary continue action ------------------------- */
body.has-continue-bar, body.has-continue-bar main.container {
body.has-continue-bar .container { padding-bottom: calc(110px + env(safe-area-inset-bottom));
padding-bottom: calc(130px + env(safe-area-inset-bottom));
} }
.continue-bar { .continue-bar {
@@ -171,8 +174,8 @@ body.has-continue-bar .container {
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 100; z-index: 100;
padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(0deg, var(--color-bg) 70%, rgba(255, 245, 247, 0)); background: linear-gradient(180deg, rgba(255, 245, 247, 0) 0%, var(--color-bg) 50%);
pointer-events: none; pointer-events: none;
} }