fix(bento): force equal-width tiles via min-width: 0

Tiles in the same row had different widths because grid items
default to min-width: auto, which makes them grow to fit their
intrinsic content width instead of dividing the row equally.

Add min-width: 0, width: 100%, and box-sizing: border-box to
bento-tile so all tiles in a row are exactly equal width.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-06-09 14:19:18 +07:00
parent 525dc358a3
commit b49931a87a

View File

@@ -68,6 +68,9 @@ const revealClass = reveal ? 'reveal' : '';
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
transform-style: preserve-3d; transform-style: preserve-3d;
min-height: 380px; min-height: 380px;
min-width: 0;
width: 100%;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }