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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user