quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashcam): remove inline width from thumb td, control via CSS with !important

Browse Source 
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 <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 00:53:02 -04:00
co-authored by Copilot
parent 5b2854fbec
commit 522674c907
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/local-videos.js
+1 -2
View File
@@ -100,8 +100,7 @@
// Thumbnail cell — also contains filename for mobile view // Thumbnail cell — also contains filename for mobile view
const preview = document.createElement("td"); const preview = document.createElement("td");
preview.style.width = "9rem"; preview.className = "dash-thumb-td";
preview.style.padding = "0.25rem";
const image = document.createElement("img"); const image = document.createElement("img");
image.className = "local-video-thumbnail"; image.className = "local-video-thumbnail";
image.alt = ""; image.alt = "";
static/yaris.css
+7 -5
View File
@@ -273,6 +273,7 @@ body {
@media (min-width: 576px) { @media (min-width: 576px) {
.dash-thumb-name { display: none; } .dash-thumb-name { display: none; }
.dash-col-file { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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 */ /* 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 > td:first-child,
.dash-row > .dash-actions-td { display: flex !important; align-items: center; } .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; } .dash-row > td:first-child { flex: 1; min-width: 0; }
/* Actions never shrink */ /* Actions never shrink */
.dash-row > .dash-actions-td { flex-shrink: 0; } .dash-row > .dash-actions-td { flex-shrink: 0; }
/* Filename under thumbnail on mobile */ /* Thumbnail sizing — override any inline style */
.dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; } .dash-thumb-td { width: 5rem !important; padding: 0.2rem !important; }
.local-video-thumbnail { width: 4.5rem !important; }
/* Shrink thumbnail */ /* Filename under thumbnail */
.local-video-thumbnail { width: 4.5rem; } .dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; }
/* Icon-only buttons */ /* Icon-only buttons */
.btn-icon-mobile .btn-label { display: none; } .btn-icon-mobile .btn-label { display: none; }