From 908d311e5c0bb05b32d5efc12fe9e5c910d9767b Mon Sep 17 00:00:00 2001 From: Jonathon Wright Date: Fri, 3 Jul 2026 23:56:07 +1000 Subject: [PATCH] fix(skills): collapse bento spans at 2-col breakpoint, not 720px Landscape phone (720-1000px band) put the parent grid at 2 columns while the tile spans (hero span-2, full span-3) only reset at 720px. A span-3 tile in a 2-col grid forced a phantom 3rd column and collapsed the 1fr tracks to 58px 58px 760px, squishing the flagship card to ~132px off the visible area. Move the span reset to the same 1000px breakpoint the grid drops to 2 columns: now 446px 446px, hero full-width. Desktop 4-col + portrait 1-col unchanged. --- src/components/SkillGroup.astro | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SkillGroup.astro b/src/components/SkillGroup.astro index fd7947a..1a61b00 100644 --- a/src/components/SkillGroup.astro +++ b/src/components/SkillGroup.astro @@ -141,9 +141,11 @@ const spanClass = padding: 5px 10px; } - /* bento collapses gracefully on narrow screens (grid goes 2-col then 1-col - in the parent; spans clamp automatically via grid auto-placement) */ - @media (max-width: 720px) { + /* Below 1000px the parent grid is only 2 columns — so the multi-column spans + must collapse to full-width HERE, not at 720px. A `span 3` tile left active + in a 2-col grid forces a phantom 3rd column and collapses the 1fr tracks + (58px 58px 760px), squishing the first tile to ~130px in landscape phone. */ + @media (max-width: 1000px) { .tile--hero, .tile--wide, .tile--full {