From f2162133a8049b129b2da3068a65a78e9f2fdac4 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Thu, 12 Mar 2026 19:25:36 +0300
Subject: [PATCH] Fix rectangle preview canvas overflow for large LED counts

Wrap edge canvases in container divs with position:relative + overflow:hidden,
and absolutely-position the canvases inside. This prevents canvas intrinsic
pixel dimensions from overriding CSS grid cell sizing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/wled_controller/static/css/modal.css  | 21 +++++++++++++------
 .../templates/modals/test-css-source.html     |  8 +++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/server/src/wled_controller/static/css/modal.css b/server/src/wled_controller/static/css/modal.css
index fa2176a..6b082c2 100644
--- a/server/src/wled_controller/static/css/modal.css
+++ b/server/src/wled_controller/static/css/modal.css
@@ -131,8 +131,10 @@
 .css-test-rect {
     display: grid;
     grid-template-columns: 14px 1fr 14px;
-    grid-template-rows: 14px auto 14px;
+    grid-template-rows: 14px 1fr 14px;
     width: 100%;
+    height: 320px;
+    overflow: hidden;
 }
 
 .css-test-rect-corner {
@@ -142,15 +144,22 @@
 .css-test-rect-screen {
     background: #111;
     border-radius: 2px;
-    aspect-ratio: 16 / 9;
 }
 
-.css-test-edge-h,
-.css-test-edge-v {
-    image-rendering: pixelated;
-    display: block;
+.css-test-edge-wrap {
+    position: relative;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+}
+
+.css-test-edge {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
+    image-rendering: pixelated;
+    display: block;
 }
 
 .css-test-info {
diff --git a/server/src/wled_controller/templates/modals/test-css-source.html b/server/src/wled_controller/templates/modals/test-css-source.html
index 29cb388..ac641df 100644
--- a/server/src/wled_controller/templates/modals/test-css-source.html
+++ b/server/src/wled_controller/templates/modals/test-css-source.html
@@ -15,15 +15,15 @@
             <div id="css-test-rect-view" style="display:none">
                 <div class="css-test-rect" id="css-test-rect">
                     <div class="css-test-rect-corner"></div>
-                    <canvas id="css-test-edge-top" class="css-test-edge-h"></canvas>
+                    <div class="css-test-edge-wrap"><canvas id="css-test-edge-top" class="css-test-edge"></canvas></div>
                     <div class="css-test-rect-corner"></div>
 
-                    <canvas id="css-test-edge-left" class="css-test-edge-v"></canvas>
+                    <div class="css-test-edge-wrap"><canvas id="css-test-edge-left" class="css-test-edge"></canvas></div>
                     <div class="css-test-rect-screen"></div>
-                    <canvas id="css-test-edge-right" class="css-test-edge-v"></canvas>
+                    <div class="css-test-edge-wrap"><canvas id="css-test-edge-right" class="css-test-edge"></canvas></div>
 
                     <div class="css-test-rect-corner"></div>
-                    <canvas id="css-test-edge-bottom" class="css-test-edge-h"></canvas>
+                    <div class="css-test-edge-wrap"><canvas id="css-test-edge-bottom" class="css-test-edge"></canvas></div>
                     <div class="css-test-rect-corner"></div>
                 </div>
             </div>