From de96ba146759be8a4a4efba351dfd17efdcc75b1 Mon Sep 17 00:00:00 2001 From: Bob Lee Date: Thu, 30 Jul 2026 17:35:59 -0700 Subject: [PATCH] fix(web-ui): make miniapp cards fill grid tracks MiniAppCard had a fixed 360px width while GalleryGrid tracks stretch with minmax(360px, 1fr), so any slight window resize left large blank areas beside each card, and containers narrower than 360px overflowed. - MiniAppCard: width 100% so the grid track controls sizing - GalleryGrid: minmax(min(var(--gallery-grid-min), 100%), 1fr) so cards shrink instead of overflowing below the minimum card width --- .../src/app/components/GalleryLayout/GalleryLayout.scss | 2 +- .../src/app/scenes/miniapps/components/MiniAppCard.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss index 39ab5959dd..0c8f9a7270 100644 --- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss +++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss @@ -152,7 +152,7 @@ $content-max: 1360px; --gallery-skeleton-height: 140px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--gallery-grid-min), 1fr)); + grid-template-columns: repeat(auto-fill, minmax(min(var(--gallery-grid-min), 100%), 1fr)); gap: $size-gap-3; align-content: start; diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss index 43741c4ee5..42de032f68 100644 --- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss +++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss @@ -5,7 +5,8 @@ --miniapp-card-action-bg: color-mix(in srgb, var(--color-static-white) 30%, transparent); --miniapp-card-action-hover-bg: color-mix(in srgb, var(--color-static-white) 60%, transparent); - width: 360px; + width: 100%; + min-width: 0; min-height: 200px; border-radius: 15px; background: var(--element-bg-soft); @@ -300,7 +301,6 @@ // ── Responsive ── @media (max-width: 720px) { .miniapp-card { - width: 100%; min-height: 180px; } }