diff --git a/app/features/user-page/components/UserPageIconNav.module.css b/app/features/user-page/components/UserPageIconNav.module.css index 5d2321ad8..a73f3dd36 100644 --- a/app/features/user-page/components/UserPageIconNav.module.css +++ b/app/features/user-page/components/UserPageIconNav.module.css @@ -1,25 +1,22 @@ .iconNav { - display: flex; - justify-content: center; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); - overflow-x: auto; - scroll-snap-type: x mandatory; - padding-block: var(--s-2); - scrollbar-width: thin; } .iconNavItem { - flex: 0 0 auto; - scroll-snap-align: start; display: flex; align-items: center; - justify-content: center; + gap: var(--s-2); + min-width: 0; + padding-inline: var(--s-3); height: var(--field-size); - aspect-ratio: 1 / 1; background-color: var(--color-bg); border: 2px solid var(--color-bg-higher); border-radius: var(--radius-box); color: var(--color-text); + font-size: var(--font-xs); + font-weight: var(--weight-semi); transition: all 0.2s; cursor: pointer; @@ -38,14 +35,15 @@ } } +.label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + @container (width >= 720px) { .iconNav { - display: grid; - grid-template-columns: repeat(4, 42px); - grid-auto-rows: 42px; - gap: var(--s-2); - overflow-x: visible; - scroll-snap-type: none; - padding-block: 0; + grid-template-columns: repeat(2, 150px); } } diff --git a/app/features/user-page/components/UserPageIconNav.tsx b/app/features/user-page/components/UserPageIconNav.tsx index 081afa910..744876a83 100644 --- a/app/features/user-page/components/UserPageIconNav.tsx +++ b/app/features/user-page/components/UserPageIconNav.tsx @@ -35,7 +35,7 @@ export function UserPageIconNav({ items }: { items: UserPageNavItem[] }) { aria-label={ item.count !== undefined ? `${item.label} (${item.count})` - : item.label + : undefined } > + {item.label} ))} diff --git a/changelog/2026-09-07-user-page-nav-labels.md b/changelog/2026-09-07-user-page-nav-labels.md new file mode 100644 index 000000000..305c12a4a --- /dev/null +++ b/changelog/2026-09-07-user-page-nav-labels.md @@ -0,0 +1,5 @@ +--- +navItem: u +type: feature +--- +Profile page links (Seasons, Builds, Vods...) now show labels next to their icons