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 f7e036002a.

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

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}`">