From 9f0f53a59c8d6dde21ab737998381f585e918481 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 00:33:57 -0400
Subject: [PATCH] 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 <223556219+Copilot@users.noreply.github.com>
---
 static/yaris.css | 66 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/static/yaris.css b/static/yaris.css
index 37b268a..f29d636 100644
--- a/static/yaris.css
+++ b/static/yaris.css
@@ -269,29 +269,53 @@ body {
 
 /* ── Dashcam / video ─────────────────────────────────────────────────────── */
 
-/* On mobile: hide file/size/date/upload columns — only thumb+name and actions remain */
-@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; }
-}
-
+/* Desktop: truncate long filenames */
 @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; }
 }