From 80e5c17eadc35b294a6ea63b730840657616314b Mon Sep 17 00:00:00 2001
From: Finn Tews <finn.tews2005@gmail.com>
Date: Mon, 27 Apr 2026 23:15:12 +0200
Subject: [PATCH] fixed top only in busbar tab

Co-authored-by: Copilot <copilot@github.com>
---
 src/busbar-ui.js |  2 +-
 src/main.js      | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/busbar-ui.js b/src/busbar-ui.js
index fc8f69b..edbb27c 100644
--- a/src/busbar-ui.js
+++ b/src/busbar-ui.js
@@ -123,7 +123,7 @@ export function initBusbarUI({ onDownloadSingle, onDownloadAll, onFaceFilterChan
                 b.classList.toggle('active', b.dataset.filter === faceFilter);
             });
             if (bottomFaceWrap) bottomFaceWrap.hidden = (faceFilter === 'top');
-            if (onFaceFilterChange) onFaceFilterChange();
+            if (onFaceFilterChange) onFaceFilterChange(faceFilter);
             renderBusbarList();
         });
     });
diff --git a/src/main.js b/src/main.js
index 0003256..a3c23ab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,14 +18,14 @@ function scaleCanvasById(id) {
     const canvas = document.getElementById(id);
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
+    // Let CSS (width:100%, height:720px) control the display size.
+    // Only update the drawing buffer to match the current CSS-rendered size × DPR.
     const rect = canvas.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) return;
     canvas.width = rect.width * dpr;
     canvas.height = rect.height * dpr;
     const ctx = canvas.getContext('2d');
     ctx.scale(dpr, dpr);
-    canvas.style.width = rect.width + 'px';
-    canvas.style.height = rect.height + 'px';
 }
 
 function scaleCanvasForDPI() {
@@ -642,11 +642,14 @@ async function initializeApp() {
     initBusbarUI({
         onDownloadSingle: downloadSingleBusbar,
         onDownloadAll: downloadAllBusbarsZip,
-        onFaceFilterChange() {
-            requestAnimationFrame(() => {
+        onFaceFilterChange(filter) {
+            // Double rAF: first frame applies the hidden/visible DOM change,
+            // second frame reads the settled flex layout dimensions.
+            requestAnimationFrame(() => requestAnimationFrame(() => {
                 scaleCanvasById('preview');
+                if (filter === 'both') scaleCanvasById('preview-bottom');
                 redrawBusbarOverlay();
-            });
+            }));
         },
     });
     renderBusbarList();