From a272d366d35066517400361e86cc8d937b7867c1 Mon Sep 17 00:00:00 2001 From: stopflock Date: Wed, 15 Jul 2026 14:20:18 -0500 Subject: [PATCH] final-new-2-latest-v2... treat natural string length as min size --- webapp/src/components/layout/Footer.vue | 29 +++++++------------------ 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue index a215334..fb20be2 100644 --- a/webapp/src/components/layout/Footer.vue +++ b/webapp/src/components/layout/Footer.vue @@ -130,31 +130,18 @@ const getInvolvedLinks = [ line-height: 0.5rem; } -/* auto-fit + minmax lets the browser decide how many columns fit based on - the actual rendered width, reflowing dynamically instead of snapping at - a fixed breakpoint (which could crowd/truncate a column's text right - before it wrapped to its own row). */ +/* Using max-content (rather than a fixed px value) as each track's minimum + means the grid measures the actual unwrapped width each column's content + needs, and only reflows a column onto its own row once there truly isn't + room to fit it at that natural width — so single-line labels like "Terms + of Service" never get clipped *or* wrap mid-word purely because a fixed + guessed threshold was too small. */ .footer-links-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)); gap: 24px; } - -/* Grid items default to min-width: auto, which uses each item's intrinsic - (unwrapped) content width as a floor — that floor can exceed the - minmax() track size above, silently overflowing the track and clipping - text (e.g. the "e" in "Service") right at the container edge instead of - actually reflowing to a new row. Forcing min-width: 0 here lets the grid - track's own sizing win, and letting the title text wrap (overriding - Vuetify's default single-line ellipsis) means long labels fold onto a - second line instead of being cut off. */ -.footer-links-grid > div { - min-width: 0; -} -.footer-links-grid :deep(.v-list-item-title) { - white-space: normal; - overflow-wrap: break-word; -} +