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
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 = "";
static/yaris.css
+7 -5
View File
@@ -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; }