diff --git a/src/lib/components/home/NumberCard.svelte b/src/lib/components/home/NumberCard.svelte
index 2fc1c66..88d0288 100644
--- a/src/lib/components/home/NumberCard.svelte
+++ b/src/lib/components/home/NumberCard.svelte
@@ -44,6 +44,7 @@
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
aspect-ratio: 3 / 4;
+ width: 100%;
min-width: 0;
padding: 12px;
display: grid;
diff --git a/src/lib/screens/HomeScreen.svelte b/src/lib/screens/HomeScreen.svelte
index f5c9f5f..d2eb716 100644
--- a/src/lib/screens/HomeScreen.svelte
+++ b/src/lib/screens/HomeScreen.svelte
@@ -37,7 +37,7 @@
{#each TARGETS as target (target)}
-
+
{/each}
@@ -72,12 +72,14 @@
}
.cards-grid {
/* Karten haben aspect-ratio 3/4. Bei 7 Karten ergeben sich je nach Spaltenzahl
- 2/3/4 Reihen — Grid-Breite wird so begrenzt, dass die Reihen in die verfügbare
- Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g. */
+ 2/3/4 Reihen — Breite wird so begrenzt, dass die Reihen in die verfügbare
+ Höhe passen. Formel: max-width = C·3·(H - (R-1)·g) / (4R) + (C-1)·g.
+ Flexbox statt Grid, damit eine nicht volle letzte Reihe zentriert wird. */
--gap: 14px;
--avail-h: calc(100dvh - 130px);
- display: grid;
- grid-template-columns: repeat(4, 1fr);
+ --cols: 4;
+ display: flex;
+ flex-wrap: wrap;
gap: var(--gap);
align-content: center;
justify-content: center;
@@ -87,16 +89,20 @@
margin-inline: auto;
padding-bottom: 10px;
}
+ .cell {
+ flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+ min-width: 0;
+ }
@media (max-width: 640px) {
.cards-grid {
- grid-template-columns: repeat(3, 1fr);
+ --cols: 3;
/* 3 Spalten, 3 Reihen */
max-width: calc(var(--avail-h) * 0.75 + var(--gap) * 0.5);
}
}
@media (max-width: 380px) {
.cards-grid {
- grid-template-columns: repeat(2, 1fr);
+ --cols: 2;
/* 2 Spalten, 4 Reihen */
max-width: calc(var(--avail-h) * 0.375 - var(--gap) * 0.125);
}