Fix Recent Activity table collapsing FILE column on narrow screens (#217)

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;