Show labels on profile page links

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);
 	}
 }

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
 					}
 				>
 					<Image
@@ -44,6 +44,7 @@ export function UserPageIconNav({ items }: { items: UserPageNavItem[] }) {
 						height={24}
 						alt=""
 					/>
+					<span className={styles.label}>{item.label}</span>
 				</NavLink>
 			))}
 		</nav>

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