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>
This commit is contained in:
2026-03-12 19:25:36 +03:00
parent bebdfcf319
commit f2162133a8
2 changed files with 19 additions and 10 deletions

View File

@@ -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 {