From aaea15a155ce78c6b78aa33c4eddb331ae8750bc Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 7 Sep 2026 20:42:36 +0300
Subject: [PATCH] Show labels on profile page links

---
 .../components/UserPageIconNav.module.css     | 32 +++++++++----------
 .../user-page/components/UserPageIconNav.tsx  |  3 +-
 changelog/2026-09-07-user-page-nav-labels.md  |  5 +++
 3 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 changelog/2026-09-07-user-page-nav-labels.md

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