diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-08-21 18:37:13 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-08-21 18:37:13 +0200 |
| commit | 9ec4d3dbc1f55ca412f6df67b8576b087b15887c (patch) | |
| tree | e9831468769a0dc0fc23fe2261846e53e7bc2e2b | |
| parent | d25c2cba801cbaa9f9c0d5a92b90f153630ffe24 (diff) | |
fix: ride detail summary stats fit on one line
The summary dl used a 3-column grid, so the 4th stat (elevation)
wrapped to a second line. Switch to flex with space-around and a
smaller gap so all four stats share one line while still wrapping
gracefully on very narrow screens.
| -rw-r--r-- | web/static/style.css | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/web/static/style.css b/web/static/style.css index ef6348b..5ab6fa1 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -178,10 +178,10 @@ select { border: 1px solid var(--color-input-border); border-radius: .55rem; pad .climbs-panel > .climb-navigation { margin-top: 0; } .climb-navigation output { color: var(--color-muted); font-size: .9rem; font-weight: 700; } .climb-navigation .button:disabled { opacity: .45; cursor: default; } -dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; } +dl { display: flex; justify-content: space-around; gap: .5rem; margin: 0; flex-wrap: wrap; } dt { color: var(--color-subtle); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } dd { margin: .25rem 0 0; font-size: 1.2rem; font-weight: 700; } @media (width <= 900px) { .ride-detail-columns { grid-template-columns: 1fr; } } @media (width <= 700px) { .container { width: min(100% - 1rem, 70rem); padding-top: 1.5rem; } .site-header { padding-inline: 1rem; } th:nth-child(n+4), td:nth-child(n+4) { display: none; } .panel { padding: .8rem; } } @media (width <= 700px) { .ride-filter-ranges, .ride-filter-meta { grid-template-columns: 1fr; } } -@media (width <= 500px) { dl { grid-template-columns: repeat(2, 1fr); } .official-climb-summary-stats { gap: .55rem; } .official-climb-card-title { display: block; } .date-filter-inputs { grid-template-columns: 1fr; } } +@media (width <= 500px) { .official-climb-summary-stats { gap: .55rem; } .official-climb-card-title { display: block; } .date-filter-inputs { grid-template-columns: 1fr; } } |