diff --git a/css/tailwind.source.css b/css/tailwind.source.css index 07ab5cf6..347e790b 100644 --- a/css/tailwind.source.css +++ b/css/tailwind.source.css @@ -3662,6 +3662,9 @@ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); + /* Every tile the SAME height, so a 2-line label can't stretch its row + taller than the others (the "ragged grid of ellipses" fix). */ + grid-auto-rows: var(--profile-modal-nav-tile-height); } .profile-modal__nav > button { @@ -3672,12 +3675,17 @@ text-align: center; gap: var(--space-2xs); width: 100%; - /* equal-height tiles: a consistent floor so short and 2-line labels align - (grid rows stretch to the tallest tile, so within a row they match) */ - min-block-size: var(--profile-modal-nav-tile-min-height); + block-size: 100%; + /* Consistent rounded-square tiles, not rounded-full ellipses (btn's + default) that turn into circles once a tile gets taller. */ + border-radius: var(--radius-xl); + /* Subtle fill so they read as solid cards, not floating outlines. The + active tile's bg-primary (higher specificity) still wins. */ + background-color: var(--color-panel); padding-block: var(--space-xs); padding-inline: var(--space-3xs); line-height: 1.15; + overflow: hidden; /* wrap labels at spaces, not mid-word */ overflow-wrap: break-word; word-break: normal; diff --git a/css/tokens.css b/css/tokens.css index 9551feda..fed818d7 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -359,8 +359,9 @@ --notification-banner-max-inline: var(--size-28rem); --profile-modal-nav-min-width: max-content; --profile-modal-nav-max-width: max-content; - /* Equal-height floor for the mobile tab-grid tiles. */ - --profile-modal-nav-tile-min-height: 4.75rem; + /* Uniform height for the mobile tab-grid tiles (roomy enough for a 2-line + label, so a wrapping tile never stretches its row taller than the rest). */ + --profile-modal-nav-tile-height: 5rem; --profile-modal-scrollbar-offset: var(--space-2xs); --modal-embed-height: 80vh; --profile-history-max-height: 26.25rem;