From fd037f856b9406560b592b20ace795e87dedbd45 Mon Sep 17 00:00:00 2001
From: P4ncake <76443059+P4ncake4451@users.noreply.github.com>
Date: Thu, 2 Jul 2026 21:46:34 +0200
Subject: [PATCH 1/3] 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
---
 apps/frontend/src/pages/settings/profile.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index b936f655ae..0349dbd848 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -62,6 +62,7 @@
 				</span>
 			</label>
 			<StyledInput id="username-field" v-model="current.username" />
+			<div id="bio-character-limit" class="inline-block pl-2" v-if="current.username.length>=30" :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 +70,7 @@
 				</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}`">

From f7e036002abfc993eed141e34c5776efb1ce53e5 Mon Sep 17 00:00:00 2001
From: P4ncake <76443059+P4ncake4451@users.noreply.github.com>
Date: Fri, 3 Jul 2026 02:27:59 +0200
Subject: [PATCH 2/3] feat(ux): Added "Expand" button to bio on mobile

---
 apps/frontend/src/locales/en-US/index.json    |  6 +++
 apps/frontend/src/locales/pl-PL/index.json    |  6 +++
 apps/frontend/src/pages/user/[user].vue       | 14 ++++++
 .../src/components/base/ContentPageHeader.vue | 48 ++++++++++++++++++-
 4 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 70b5e7ea8a..268cb7ab08 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2963,6 +2963,12 @@
   "profile.bio.fallback.user": {
     "message": "A Modrinth user."
   },
+  "profile.bio.expand": {
+	"message": "Expand"
+  },
+  "profile.bio.collapse": {
+	"message": "Collapse"
+  },
   "profile.button.analytics": {
     "message": "View user analytics"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 5b281fdac7..ac453c527f 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -2948,6 +2948,12 @@
   "profile.bio.fallback.user": {
     "message": "Użytkownik Modrinth."
   },
+  "profile.bio.expand": {
+	"message": "Rozwiń"
+  },
+  "profile.bio.collapse": {
+	"message": "Zwiń"
+  },
   "profile.button.analytics": {
     "message": "Pokaż dane analityczne użytkownika"
   },
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 0f859690e8..8f2e94deec 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -182,6 +182,12 @@
 									: formatMessage(messages.bioFallbackUser)
 						}}
 					</template>
+					<template #bio-collapse>
+						{{formatMessage(messages.bioCollapse)}}
+					</template>
+					<template #bio-expand>
+						{{formatMessage(messages.bioExpand)}}
+					</template>
 					<template v-if="!isModrinthUser" #stats>
 						<div
 							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
@@ -648,6 +654,14 @@ const messages = defineMessages({
 		id: 'profile.bio.fallback.creator',
 		defaultMessage: 'A Modrinth creator.',
 	},
+	bioExpand: {
+		id: 'profile.bio.expand',
+		defaultMessage: 'Expand',
+	},
+	bioCollapse: {
+		id: 'profile.bio.collapse',
+		defaultMessage: 'Collapse',
+	},
 	collectionLabel: {
 		id: 'profile.label.collection',
 		defaultMessage: 'Collection',
diff --git a/packages/ui/src/components/base/ContentPageHeader.vue b/packages/ui/src/components/base/ContentPageHeader.vue
index dccb49b688..f41beeee05 100644
--- a/packages/ui/src/components/base/ContentPageHeader.vue
+++ b/packages/ui/src/components/base/ContentPageHeader.vue
@@ -13,11 +13,22 @@
 						</div>
 						<p
 							v-if="$slots.summary"
+							ref="summary"
 							class="m-0 max-w-[44rem] empty:hidden"
-							:class="[disableLineClamp ? '' : 'line-clamp-2']"
+							:class="[expandBio || disableLineClamp ? '' : 'line-clamp-2']"
 						>
 							<slot name="summary" />
 						</p>
+						<button
+							v-if="showToggle"
+							@click="expandBio=!expandBio"
+							class="text-left underline text-gray-900"
+						>
+							<b>
+								<span v-if="expandBio"><slot name="bio-collapse" /></span>
+								<span v-else><slot name="bio-expand" /></span>
+							</b>
+						</button>
 					</div>
 					<div v-if="$slots.stats" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
 						<slot name="stats" />
@@ -41,5 +52,38 @@ interface Props {
 	disableLineClamp?: boolean
 }
 
-const { disableLineClamp } = defineProps<Props>()
+const props = defineProps<Props>()
+const expandBio = ref(false)
+const summary = ref<HTMLElement | null>(null)
+const isCutOff = ref(false)
+
+const showToggle = computed(() => {
+	if (props.disableLineClamp) return false
+	return isCutOff.value
+})
+
+function measureCutOff() {
+	const el = summary.value
+	if (!el) return
+	isCutOff.value = el.scrollHeight > el.clientHeight + 1
+}
+
+let ro: ResizeObserver | undefined
+
+onMounted(async () => {
+	await nextTick()
+	measureCutOff()
+
+	window.addEventListener("resize", function (e) {
+		expandBio.value = false
+		console.log("meow")
+		measureCutOff()
+	})
+})
+
+onBeforeUnmount(() => {
+	expandBio.value = false
+	ro?.disconnect()
+})
+
 </script>

From 85f5a80967a429055675d8fc889f71f3a70cb38e Mon Sep 17 00:00:00 2001
From: P4ncake <76443059+P4ncake4451@users.noreply.github.com>
Date: Sun, 12 Jul 2026 01:06:11 +0200
Subject: [PATCH 3/3] Revert "feat(ux): Added "Expand" button to bio on mobile"

This reverts commit f7e036002abfc993eed141e34c5776efb1ce53e5.
---
 apps/frontend/src/locales/en-US/index.json    |  6 ---
 apps/frontend/src/locales/pl-PL/index.json    |  6 ---
 apps/frontend/src/pages/user/[user].vue       | 14 ------
 .../src/components/base/ContentPageHeader.vue | 48 +------------------
 4 files changed, 2 insertions(+), 72 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 268cb7ab08..70b5e7ea8a 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2963,12 +2963,6 @@
   "profile.bio.fallback.user": {
     "message": "A Modrinth user."
   },
-  "profile.bio.expand": {
-	"message": "Expand"
-  },
-  "profile.bio.collapse": {
-	"message": "Collapse"
-  },
   "profile.button.analytics": {
     "message": "View user analytics"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index ac453c527f..5b281fdac7 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -2948,12 +2948,6 @@
   "profile.bio.fallback.user": {
     "message": "Użytkownik Modrinth."
   },
-  "profile.bio.expand": {
-	"message": "Rozwiń"
-  },
-  "profile.bio.collapse": {
-	"message": "Zwiń"
-  },
   "profile.button.analytics": {
     "message": "Pokaż dane analityczne użytkownika"
   },
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 8f2e94deec..0f859690e8 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -182,12 +182,6 @@
 									: formatMessage(messages.bioFallbackUser)
 						}}
 					</template>
-					<template #bio-collapse>
-						{{formatMessage(messages.bioCollapse)}}
-					</template>
-					<template #bio-expand>
-						{{formatMessage(messages.bioExpand)}}
-					</template>
 					<template v-if="!isModrinthUser" #stats>
 						<div
 							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
@@ -654,14 +648,6 @@ const messages = defineMessages({
 		id: 'profile.bio.fallback.creator',
 		defaultMessage: 'A Modrinth creator.',
 	},
-	bioExpand: {
-		id: 'profile.bio.expand',
-		defaultMessage: 'Expand',
-	},
-	bioCollapse: {
-		id: 'profile.bio.collapse',
-		defaultMessage: 'Collapse',
-	},
 	collectionLabel: {
 		id: 'profile.label.collection',
 		defaultMessage: 'Collection',
diff --git a/packages/ui/src/components/base/ContentPageHeader.vue b/packages/ui/src/components/base/ContentPageHeader.vue
index f41beeee05..dccb49b688 100644
--- a/packages/ui/src/components/base/ContentPageHeader.vue
+++ b/packages/ui/src/components/base/ContentPageHeader.vue
@@ -13,22 +13,11 @@
 						</div>
 						<p
 							v-if="$slots.summary"
-							ref="summary"
 							class="m-0 max-w-[44rem] empty:hidden"
-							:class="[expandBio || disableLineClamp ? '' : 'line-clamp-2']"
+							:class="[disableLineClamp ? '' : 'line-clamp-2']"
 						>
 							<slot name="summary" />
 						</p>
-						<button
-							v-if="showToggle"
-							@click="expandBio=!expandBio"
-							class="text-left underline text-gray-900"
-						>
-							<b>
-								<span v-if="expandBio"><slot name="bio-collapse" /></span>
-								<span v-else><slot name="bio-expand" /></span>
-							</b>
-						</button>
 					</div>
 					<div v-if="$slots.stats" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
 						<slot name="stats" />
@@ -52,38 +41,5 @@ interface Props {
 	disableLineClamp?: boolean
 }
 
-const props = defineProps<Props>()
-const expandBio = ref(false)
-const summary = ref<HTMLElement | null>(null)
-const isCutOff = ref(false)
-
-const showToggle = computed(() => {
-	if (props.disableLineClamp) return false
-	return isCutOff.value
-})
-
-function measureCutOff() {
-	const el = summary.value
-	if (!el) return
-	isCutOff.value = el.scrollHeight > el.clientHeight + 1
-}
-
-let ro: ResizeObserver | undefined
-
-onMounted(async () => {
-	await nextTick()
-	measureCutOff()
-
-	window.addEventListener("resize", function (e) {
-		expandBio.value = false
-		console.log("meow")
-		measureCutOff()
-	})
-})
-
-onBeforeUnmount(() => {
-	expandBio.value = false
-	ro?.disconnect()
-})
-
+const { disableLineClamp } = defineProps<Props>()
 </script>