diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue index 21e523d..a215334 100644 --- a/webapp/src/components/layout/Footer.vue +++ b/webapp/src/components/layout/Footer.vue @@ -139,5 +139,22 @@ const getInvolvedLinks = [ grid-template-columns: repeat(auto-fit, minmax(180px, 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; +} +