From 522674c90753afc5cc949e3cc798298f13ddba71 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 00:53:02 -0400
Subject: [PATCH] fix(dashcam): remove inline width from thumb td, control via
 CSS with !important

Inline style.width on td was overriding the mobile media query width rule.
Use dash-thumb-td class for desktop (9rem) and mobile (5rem !important).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 static/js/local-videos.js |  3 +--
 static/yaris.css          | 12 +++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/js/local-videos.js b/static/js/local-videos.js
index 393e1cd..cb3d548 100644
--- a/static/js/local-videos.js
+++ b/static/js/local-videos.js
@@ -100,8 +100,7 @@
 
             // Thumbnail cell — also contains filename for mobile view
             const preview = document.createElement("td");
-            preview.style.width = "9rem";
-            preview.style.padding = "0.25rem";
+            preview.className = "dash-thumb-td";
             const image = document.createElement("img");
             image.className = "local-video-thumbnail";
             image.alt = "";
diff --git a/static/yaris.css b/static/yaris.css
index a124dcd..4081786 100644
--- a/static/yaris.css
+++ b/static/yaris.css
@@ -273,6 +273,7 @@ body {
 @media (min-width: 576px) {
     .dash-thumb-name { display: none; }
     .dash-col-file { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .dash-thumb-td { width: 9rem; padding: 0.25rem; }
 }
 
 /* Mobile: reflow .dash-row into a flex card — thumb + name on left, buttons on right */
@@ -292,17 +293,18 @@ body {
     .dash-row > td:first-child,
     .dash-row > .dash-actions-td { display: flex !important; align-items: center; }
 
-    /* First cell takes remaining space */
+    /* First cell takes remaining space, no overflow */
     .dash-row > td:first-child { flex: 1; min-width: 0; }
 
     /* Actions never shrink */
     .dash-row > .dash-actions-td { flex-shrink: 0; }
 
-    /* Filename under thumbnail on mobile */
-    .dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; }
+    /* Thumbnail sizing — override any inline style */
+    .dash-thumb-td { width: 5rem !important; padding: 0.2rem !important; }
+    .local-video-thumbnail { width: 4.5rem !important; }
 
-    /* Shrink thumbnail */
-    .local-video-thumbnail { width: 4.5rem; }
+    /* Filename under thumbnail */
+    .dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; }
 
     /* Icon-only buttons */
     .btn-icon-mobile .btn-label { display: none; }