alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix rectangle preview canvas overflow for large LED counts

Browse Source 
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>
This commit is contained in:
Admin
2026-03-12 19:25:36 +03:00
parent bebdfcf319
commit f2162133a8
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
server/src/wled_controller/static/css/modal.css
View File

@@ -131,8 +131,10 @@
.css-test-rect { .css-test-rect {
display: grid; display: grid;
grid-template-columns: 14px 1fr 14px; grid-template-columns: 14px 1fr 14px;
grid-template-rows: 14px auto 14px; grid-template-rows: 14px 1fr 14px;
width: 100%; width: 100%;
height: 320px;
overflow: hidden;
} }
.css-test-rect-corner { .css-test-rect-corner {
@@ -142,15 +144,22 @@
.css-test-rect-screen { .css-test-rect-screen {
background: #111; background: #111;
border-radius: 2px; border-radius: 2px;
aspect-ratio: 16 / 9;
} }
.css-test-edge-h, .css-test-edge-wrap {
.css-test-edge-v { position: relative;
image-rendering: pixelated; overflow: hidden;
display: block; min-width: 0;
min-height: 0;
}
.css-test-edge {
position: absolute;
inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
image-rendering: pixelated;
display: block;
} }
.css-test-info { .css-test-info {

8
server/src/wled_controller/templates/modals/test-css-source.html
View File

@@ -15,15 +15,15 @@
<div id="css-test-rect-view" style="display:none"> <div id="css-test-rect-view" style="display:none">
<div class="css-test-rect" id="css-test-rect"> <div class="css-test-rect" id="css-test-rect">
<div class="css-test-rect-corner"></div> <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> <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> <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> <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 class="css-test-rect-corner"></div>
</div> </div>
</div> </div>