fix(dashcam): reflow table rows as flex cards on mobile so buttons are always visible

Replace column-hiding approach (still caused 691px overflow) with full
table reflow: on <576px each tr becomes a flex row, all tds hidden except
first (thumb+name) and .dash-actions-td (buttons). Buttons can never
overflow because the row is constrained to viewport width.

Co-authored-by: Copilot <[email protected]>

static/yaris.css

@@ -269,29 +269,53 @@ body {
 
 /* ── Dashcam / video ─────────────────────────────────────────────────────── */
 
-/* On mobile: hide file/size/date/upload columns — only thumb+name and actions remain */
+/* Desktop: truncate long filenames */
-@media (max-width: 575.98px) {
-    .dash-col-size,
-    .dash-col-date,
-    .dash-col-upload,
-    .dash-col-file { display: none; }
-
-    /* Show filename inside the thumbnail cell instead */
-    .dash-thumb-name { display: block !important; }
-
-    /* Shrink thumbnail on mobile */
-    .local-video-thumbnail { width: 5rem; }
-
-    /* Icon-only action buttons */
-    .btn-icon-mobile .btn-label { display: none; }
-
-    /* Keep actions cell from overflowing */
-    .dash-actions-td { width: 1%; white-space: nowrap; }
-}
-
 @media (min-width: 576px) {
     .dash-thumb-name { display: none; }
-    .dash-col-file { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .dash-col-file { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
+/* Mobile: reflow table rows into flex cards */
+@media (max-width: 575.98px) {
+    /* Hide table header entirely */
+    #local-video-list thead,
+    #dashcam-file-list thead { display: none; }
+
+    /* Each row becomes a horizontal flex card */
+    #local-video-list tbody tr,
+    #dashcam-file-list tbody tr {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid var(--bs-border-color);
+        padding: .25rem .5rem;
+        gap: .5rem;
+    }
+
+    /* Hide all cells except thumb and actions */
+    #local-video-list tbody td,
+    #dashcam-file-list tbody td { display: none; }
+
+    /* Show only thumb cell and actions cell */
+    #local-video-list tbody td:first-child,
+    #local-video-list tbody .dash-actions-td,
+    #dashcam-file-list tbody td:first-child,
+    #dashcam-file-list tbody .dash-actions-td { display: flex; align-items: center; }
+
+    /* Thumb cell takes remaining space */
+    #local-video-list tbody td:first-child,
+    #dashcam-file-list tbody td:first-child { flex: 1; min-width: 0; }
+
+    /* Actions cell stays at natural width, never shrinks */
+    .dash-actions-td { flex-shrink: 0; white-space: nowrap; }
+
+    /* Filename label below thumb */
+    .dash-thumb-name { display: block !important; font-size: .7rem; }
+
+    /* Shrink thumbnail */
+    .local-video-thumbnail { width: 4.5rem; }
+
+    /* Icon-only buttons */
+    .btn-icon-mobile .btn-label { display: none; }
 }