kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(bento): add global !important override for tile width

Browse Source 
Scoped CSS in BentoTile.astro was supposed to enforce
min-width: 0 + width: 100%, but the tiles were still
rendering at different widths in the same row.

Adding a global !important override in global.css that
applies to ALL .bento-tile instances regardless of
scoping, plus a flex column layout so tile-body fills
available space and pushes the CTA to the bottom.

This guarantees equal width + equal height in the row.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-06-09 18:31:05 +07:00
parent b49931a87a
commit 9e7d27c03c
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BentoTile.astro
View File

@@ -69,7 +69,7 @@ const revealClass = reveal ? 'reveal' : '';
transform-style: preserve-3d; transform-style: preserve-3d;
min-height: 380px; min-height: 380px;
min-width: 0; min-width: 0;
width: 100%; width: 100% !important;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

26
src/styles/global.css
View File

@@ -830,3 +830,29 @@ p {
padding: 16px 28px; padding: 16px 28px;
} }
} }
/* ============================================
BENTO TILE — global override (unscoped)
Forces equal-width tiles regardless of content
============================================ */
.bento-tile {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
min-height: 380px;
display: flex;
flex-direction: column;
}
/* Make tile-body grow to push CTA to bottom */
.bento-tile .tile-body {
flex: 1;
display: flex;
flex-direction: column;
}
.bento-tile .tile-body > .mega-cta,
.bento-tile .tile-body > .btn,
.bento-tile .tile-body > a:last-child {
margin-top: auto;
}