fixed top only in busbar tab

Co-authored-by: Copilot <copilot@github.com>

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();
         });
     });

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();