From 5b2854fbecace50c691c65f11cbcd2e7757a5839 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 00:51:27 -0400
Subject: [PATCH] fix(dashcam): use style.display instead of hidden attr
 (d-flex overrides hidden)

Bootstrap d-flex sets display:flex !important which beats the HTML hidden
attribute. Switch to style.display='none'/'flex' for both status bars.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 static/js/dash.js   | 13 +++++--------
 templates/dash.html |  4 ++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/static/js/dash.js b/static/js/dash.js
index cbd1232..3fa7fdc 100644
--- a/static/js/dash.js
+++ b/static/js/dash.js
@@ -27,14 +27,12 @@ function showImportProgress(msg, total) {
     importStartTime = Date.now();
     importStatus.textContent = msg;
     importEta.textContent = '';
-    importStatusBar.hidden = false;
-    importResultBar.hidden = true;
-    // Update ETA every second based on elapsed time vs total
+    importStatusBar.style.display = 'flex';
+    importResultBar.style.display = 'none';
     clearInterval(importEtaInterval);
     if (importTotal > 0) {
         importEtaInterval = setInterval(() => {
             const elapsed = (Date.now() - importStartTime) / 1000;
-            // rough heuristic: ~3s per video on average
             const estTotal = importTotal * 3;
             const remaining = Math.max(0, Math.round(estTotal - elapsed));
             importEta.textContent = remaining > 0 ? `~${remaining}s remaining` : '';
@@ -44,11 +42,10 @@ function showImportProgress(msg, total) {
 
 function showImportResult(msg) {
     clearInterval(importEtaInterval);
-    importStatusBar.hidden = true;
+    importStatusBar.style.display = 'none';
     importResult.textContent = msg;
-    importResultBar.hidden = false;
-    // Auto-hide result after 10s
-    setTimeout(() => { importResultBar.hidden = true; }, 10000);
+    importResultBar.style.display = 'block';
+    setTimeout(() => { importResultBar.style.display = 'none'; }, 10000);
 }
 
 function fetchJson(url, options) {
diff --git a/templates/dash.html b/templates/dash.html
index faf876e..9299fe7 100644
--- a/templates/dash.html
+++ b/templates/dash.html
@@ -18,12 +18,12 @@
             <i class="fas fa-download me-1"></i>Import all
         </button>
     </div>
-    <div id="dash-import-status-bar" class="card-footer py-2 d-flex align-items-center gap-2" hidden>
+    <div id="dash-import-status-bar" class="card-footer py-2 align-items-center gap-2" style="display:none;">
         <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
         <span id="dash-import-status" class="small text-muted flex-grow-1">Importing…</span>
         <span id="dash-import-eta" class="small text-muted text-nowrap"></span>
     </div>
-    <div id="dash-import-result-bar" class="card-footer py-2 small text-muted" hidden>
+    <div id="dash-import-result-bar" class="card-footer py-2 small text-muted" style="display:none;">
         <span id="dash-import-result"></span>
     </div>
 </div>