From bce2619a718ce4c09e7d7926174d8a56f5026112 Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Fri, 24 Apr 2026 10:13:00 +0200 Subject: [PATCH] fix(css): move display:flex from to on adj-group-header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause of Konrad's narrow-wrap screenshot: display:flex was set on .adj-group-header (a ), which causes the browser to remove the row from table layout. A flex-mode ignores colspan and shrinks to intrinsic content width — which is why a row with colspan=10 ended up rendering at ~80-100px and wrapping the meta text into a 5-char column. Moved display:flex, align-items, gap, and padding onto the single child. The td is a normal block box and flexes correctly, putting icon + label + meta in a horizontal row with the meta pushed to the right via margin-left:auto (now working since its parent is a real flex container). Also added white-space:nowrap on .adj-group-meta so the meta never wraps mid-phrase even if a narrow viewport squeezes the cell. Inline comment documents the vs distinction so future sessions don't re-introduce the bug. Tests: 69/69. Co-Authored-By: Claude Opus 4.7 (1M context) --- static/css/custom.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/static/css/custom.css b/static/css/custom.css index 829d5b3..8b6af55 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1978,24 +1978,32 @@ body, .card, .modal-content, .form-control, .form-select, gap: 0.35rem; } -/* --- Group header (collapsible section divider for group-by mode) --- */ +/* --- Group header (collapsible section divider for group-by mode). + IMPORTANT: display: flex MUST be on the , NOT on the . + Setting display on a removes it from table row/column + participation — colspan is ignored, the row shrinks to intrinsic + content width, and the meta wraps into an ugly 5-char column. + (This was the root cause of the Apr 2026 narrow-wrap screenshot.) + The is an ordinary block box and flexes fine. --- */ .adj-group-header { cursor: pointer; - padding: 0.75rem 1rem; background: var(--bg-inset); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); + user-select: none; + transition: background-color 120ms; +} +.adj-group-header > td { + padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; - user-select: none; - transition: background-color 120ms; } .adj-group-header:hover { background: var(--bg-card-hover); } .adj-group-header .fa-chevron-down, .adj-group-header .fa-chevron-right { opacity: 0.7; width: 0.8rem; } .adj-group-header .adj-group-label { font-weight: 600; } -.adj-group-header .adj-group-meta { color: var(--text-secondary); font-size: 0.875rem; margin-left: auto; } +.adj-group-header .adj-group-meta { color: var(--text-secondary); font-size: 0.875rem; margin-left: auto; white-space: nowrap; } /* --- By-Type group headers: 4px left-accent picks up the type's signature badge colour so grouped rows visually echo the badges below.