From 9ec4d3dbc1f55ca412f6df67b8576b087b15887c Mon Sep 17 00:00:00 2001 From: Martin Kagamino Lehoux Date: Fri, 21 Aug 2026 18:37:13 +0200 Subject: 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. --- web/static/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/static/style.css') 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; } } -- cgit v1.3