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

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

Browse Source 
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]>
This commit is contained in:
Mathieu Moran
2026-08-10 00:33:57 -04:00
co-authored by Copilot
parent 01704d5429
commit 9f0f53a59c
1 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/yaris.css
+45 -21
View File
@@ -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; }
}