From aadbd9445df15151d2e4975927407505867f19b0 Mon Sep 17 00:00:00 2001 From: stopflock Date: Wed, 15 Jul 2026 14:44:44 -0500 Subject: [PATCH] whitespace and sizing and offsets, oh my! --- webapp/src/components/layout/Footer.vue | 28 ++++++++++++++----------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue index 758f471..b35660b 100644 --- a/webapp/src/components/layout/Footer.vue +++ b/webapp/src/components/layout/Footer.vue @@ -138,24 +138,27 @@ const getInvolvedLinks = [ each item to its content and only wraps an item to the next line once it genuinely doesn't fit — no guessed pixel thresholds required. - Each column also grows (flex-grow: 1) up to a capped max-width, so as - the window widens the columns themselves expand to fill the extra - space continuously — rather than staying a fixed size and having - justify-content snap the *gaps* between a "hugging the edges" state and - a "bunched in the center" state. Once a column hits its max-width, any - further extra space is split evenly on the outside via the centered - justify-content, which reads as intentional whitespace rather than an - abrupt jump. */ + Columns are NOT stretched (flex-grow: 0) — each stays sized to its own + content. Letting them grow to fill space (a prior revision) made wider + columns pad out with empty space to the right of their left-aligned + text, which visually dragged the whole row's "center of mass" left of + the row's true center — an effect that got worse the more room there + was to stretch into, i.e. on wider screens. + + Instead, `justify-content: space-evenly` distributes the *gaps* — both + between columns and on the outer edges — based on the container's + actual width. That gap recalculates continuously as the viewport + resizes, so spacing scales smoothly with no fixed max-width/threshold + needed and no snapping between layout states. */ .footer-links-grid { display: flex; flex-wrap: wrap; - justify-content: center; - gap: 24px 48px; + justify-content: space-evenly; + row-gap: 24px; } .footer-links-grid > div { - flex: 1 1 200px; - max-width: 320px; + flex: 0 0 auto; } /* Keep each link label on a single line so a column reflows to its own row instead of wrapping mid-word when space is tight. */ @@ -168,3 +171,4 @@ const getInvolvedLinks = [ +