christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix addiction-stat card overflow on narrow viewports
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Details
Deploy Internet for Kids / Deploy (push) Successful in 4s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 2s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 1s
Details

Browse Source 
Remove min-width:4rem on the number (was pushing card past container),
add flex-wrap + flex:1 1 12rem on label so it wraps under the number
when the card itself is narrower than content. Slightly smaller number
font (2.25rem) for balance.
This commit is contained in:
Christian Gick
2026-04-14 08:40:06 +03:00
parent 665e4cb8be
commit bd7192ae24
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/shortcodes/addiction-stat.html
View File

@@ -1,5 +1,5 @@
{{/* Single stat card — usage: {{< addiction-stat num="5h" color="#667eea" label="..." >}} */}} {{/* Single stat card — usage: {{< addiction-stat num="5h" color="#667eea" label="..." >}} */}}
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.25rem 1.5rem;margin:2rem 0;display:flex;align-items:center;gap:1.25rem"> <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.25rem 1.5rem;margin:2rem 0;display:flex;align-items:center;gap:1.25rem;max-width:100%;box-sizing:border-box;flex-wrap:wrap">
<div style="font-size:2.5rem;font-weight:800;line-height:1;color:{{ .Get "color" }};font-family:system-ui,sans-serif;min-width:4rem;text-align:center">{{ .Get "num" }}</div> <div style="font-size:2.25rem;font-weight:800;line-height:1;color:{{ .Get "color" }};font-family:system-ui,sans-serif;text-align:center;flex:0 0 auto">{{ .Get "num" }}</div>
<div style="font-size:0.95rem;color:#475569;line-height:1.4;font-family:system-ui,sans-serif">{{ .Get "label" }}</div> <div style="font-size:0.95rem;color:#475569;line-height:1.4;font-family:system-ui,sans-serif;flex:1 1 12rem;min-width:0;overflow-wrap:anywhere">{{ .Get "label" }}</div>
</div> </div>