From 59a794ebb19b6a90cee9b69006f8cc7e2f305a16 Mon Sep 17 00:00:00 2001
From: P4ncake <76443059+P4ncake4451@users.noreply.github.com>
Date: Sun, 26 Jul 2026 02:47:14 +0200
Subject: [PATCH] Minor UX UI tweaks (#6596)

* feat(ux): Add letter counters to the bio and username

the username letter counter only appears after the 30th letter to not encourage people to have long usernames for no reason

* feat(ux): Added "Expand" button to bio on mobile

* Revert "feat(ux): Added "Expand" button to bio on mobile"

This reverts commit f7e036002abfc993eed141e34c5776efb1ce53e5.

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 apps/frontend/src/pages/settings/profile.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index b936f655ae..65941a9d0f 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -62,6 +62,14 @@
 				</span>
 			</label>
 			<StyledInput id="username-field" v-model="current.username" />
+			<div
+				v-if="current.username.length >= 30"
+				id="bio-character-limit"
+				class="inline-block pl-2"
+				:class="{ 'text-red': current.username.length > 39 }"
+			>
+				{{ current.username.length }}/{{ 39 }}
+			</div>
 			<label for="bio-field">
 				<span class="label__title">{{ formatMessage(messages.bioTitle) }}</span>
 				<span class="label__description">
@@ -69,6 +77,9 @@
 				</span>
 			</label>
 			<StyledInput id="bio-field" v-model="current.bio" multiline />
+			<div id="bio-character-limit" class="pt-2" :class="{ 'text-red': current.bio.length > 160 }">
+				{{ current.bio.length }}/{{ 160 }}
+			</div>
 			<div class="input-group mt-4">
 				<ButtonStyled>
 					<NuxtLink :to="`/user/${auth.user.username}`">