menno/aitestbank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: score-rij op homepage overschreed viewport op smalle telefoons

Browse Source 
.post-row gebruikte 1fr voor de titelkolom, maar grid-items respecteren
standaard hun min-content-breedte — de niet-wrappende .meta-rij (datum/
categorie/status) duwde de hele rij breder dan de viewport op schermen
rond 375-412px (bevestigd op Pixel 7a). Fix: min-width: 0 op de kolom-2-
items zodat de 1fr-track echt kan krimpen, flex-wrap op .meta, en onder
400px verhuist de robotscore naar een eigen regel onder de dek-tekst i.p.v.
de kolombreedte te forceren.
This commit is contained in:
Menno
2026-07-30 17:36:18 +02:00
parent 405b7cbd40
commit b1e67bce37
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/index.astro
View File

@@ -102,13 +102,15 @@ const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
.post-row :global(.cover) { grid-row: 1 / 3; } .post-row :global(.cover) { grid-row: 1 / 3; }
.post-row .meta { .post-row .meta {
grid-column: 2 / 3; grid-column: 2 / 3;
min-width: 0;
font-family: var(--mono); font-family: var(--mono);
font-size: 13px; font-size: 13px;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
display: flex; display: flex;
gap: 10px; flex-wrap: wrap;
gap: 6px 10px;
align-items: center; align-items: center;
} }
.post-row .meta a { .post-row .meta a {
@@ -129,11 +131,12 @@ const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
border: 1px solid var(--line); border: 1px solid var(--line);
color: var(--muted); color: var(--muted);
} }
.post-row h2 { grid-column: 2 / 3; margin: 0; font-size: 20px; line-height: 1.35; } .post-row h2 { grid-column: 2 / 3; min-width: 0; margin: 0; font-size: 20px; line-height: 1.35; }
.post-row h2 a { color: var(--ink); text-decoration: none; } .post-row h2 a { color: var(--ink); text-decoration: none; }
.post-row h2 a:hover { color: var(--accent); } .post-row h2 a:hover { color: var(--accent); }
.post-row p.dek { .post-row p.dek {
grid-column: 2 / 3; grid-column: 2 / 3;
min-width: 0;
margin: 4px 0 0; margin: 4px 0 0;
color: var(--muted); color: var(--muted);
font-size: 15.5px; font-size: 15.5px;
@@ -142,6 +145,19 @@ const dateFormatter = new Intl.DateTimeFormat("nl-NL", {
.post-row .score { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; white-space: nowrap; } .post-row .score { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; white-space: nowrap; }
@media (max-width: 620px) { @media (max-width: 620px) {
.post-row { grid-template-columns: 64px 1fr auto; } .post-row { grid-template-columns: 64px 1fr auto; gap: 6px 12px; }
}
/* Op smalle telefoons (bv. 375-412px) past de robotrij niet meer naast de
titel — die verhuist dan naar een eigen rij onder de dek-tekst i.p.v.
de kolombreedte te forceren. */
@media (max-width: 400px) {
.post-row { grid-template-columns: 56px 1fr; }
.post-row .score {
grid-column: 2 / 3;
grid-row: auto;
justify-self: start;
margin-top: 6px;
}
} }
</style> </style>