diff --git a/web/static/css/custom.css b/web/static/css/custom.css index aa2cde6..02bc28e 100644 --- a/web/static/css/custom.css +++ b/web/static/css/custom.css @@ -154,7 +154,9 @@ footer { .recent-activity-scroll { max-height: 400px; overflow-y: auto; + overflow-x: auto; -webkit-overflow-scrolling: touch; + container-type: inline-size; /* lets the table adapt to the card width, not the viewport */ } /* Thin subtle scrollbar for Chrome/Safari/Edge */ @@ -206,6 +208,10 @@ footer { .recent-activity-table { table-layout: fixed; width: 100%; + /* Fixed columns take 500px; keep ~220px for FILE. On narrower screens + (phone portrait, high zoom) the table scrolls sideways inside + .recent-activity-scroll instead of squeezing FILE down to 0px. */ + min-width: 720px; } .activity-col-time { width: 130px; } .activity-col-action { width: 130px; } @@ -214,14 +220,40 @@ footer { .activity-col-size { width: 110px; } .activity-file-col { - word-break: break-word; + /* Not `word-break: break-word` (alias of overflow-wrap:anywhere) and no + `min-width: 0`: together they let the column collapse to one character + per line. */ + word-break: normal; + overflow-wrap: break-word; white-space: normal; - min-width: 0; } .recent-activity-scroll table td:first-child { white-space: nowrap; } +/* Narrow card (phone portrait, high browser zoom): tighter fixed columns so + FILE is reachable with a short swipe. Keyed to the card width, not the + viewport, because the sidebar also eats width on desktop. */ +@container (max-width: 719px) { + .recent-activity-table { min-width: 520px; } + .activity-col-time { width: 80px; } + .activity-col-action { width: 96px; } + .activity-col-users { width: 90px; } + .activity-col-size { width: 100px; } +} + +/* Keep the run header (title + stat pills) in view while the table is + scrolled sideways: it spans all 5 columns, so its right-aligned pills + would otherwise sit off-screen on narrow cards. */ +.run-expandable-header .run-expandable-inner { + position: sticky; + left: 0.75rem; + width: calc(100cqw - 1.5rem); + box-sizing: border-box; + flex-wrap: wrap; + row-gap: 0.35rem; +} + /* Associated files badge + expandable sub-rows */ .af-parent { cursor: pointer;