components/Modal/ProfilePopup.vue

@@ -214,8 +214,21 @@ function buttonEditProfile() {
 	
 	align-self: center;
 
+	width: 100%;
 	font-size: .8em;
 	font-weight: lighter;
+
+	white-space: pre-line;
+	line-height: 1;
+	max-height: 7em; /* 7 x 1 */
+
+	overflow-y: auto;
+	overflow-x: hidden;
+	scrollbar-width: none;
+}
+
+#about-me-text::-webkit-scrollbar {
+	display: none;
 }
 
 

components/Settings/UserSettings/Profile.vue

@@ -15,8 +15,11 @@
         <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
         <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
         <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
+        <div id="profile-about-me-input" class="profile-data-input profile-textarea-input"
+          placeholder="About Me" maxlength="240" wrap="soft" rows="8"
+          autocorrect="off" spellcheck="true" contenteditable="true"
+          @keyup="handleAboutMeKeyUp" ref="aboutMeInput">
+        </div>
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
@@ -42,6 +45,7 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
+const aboutMeInput = ref<HTMLDivElement>()
 
 const { fetchUser } = useAuth();
 
@@ -125,6 +129,12 @@ function handleCrop(blob: Blob, url: string) {
 function closeCropPopup() {
   isCropPopupVisible.value = false
 }
+
+function handleAboutMeKeyUp(event: KeyboardEvent) {
+  if (user && aboutMeInput.value) {
+    user.about = aboutMeInput.value.innerText
+  }
+}
 </script>
 
 <style scoped>
@@ -139,8 +149,9 @@ function closeCropPopup() {
 
 .profile-data-input {
   min-width: 30dvw;
+  max-width: 30dvw;
   margin: 0.07dvh;
-  padding: 0.1dvh 0.7dvw;
+  padding: .1em .7em;
   height: 2.5em;
   font-size: 1em;
   border-radius: 8px;
@@ -149,6 +160,12 @@ function closeCropPopup() {
   background-color: var(--accent-color);
 }
 
+.profile-textarea-input {
+  padding: .6em .7em;
+
+  height: fit-content;
+}
+
 #profile-popup {
   margin-left: 2dvw;
 }

components/User/UserPopup.vue

@@ -12,7 +12,7 @@
         <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
       </p>
       <div id="about-me" v-if="props.user.about">
-        {{ props.user.about }}
+        {{ props.user.about.trim() }}
       </div>
     </div>
   </div>
@@ -84,5 +84,12 @@ const props = defineProps<{
   margin-top: 32px;
   padding: 16px;
   font-size: 16px;
+  
+  white-space: pre-line;
+  line-height: 1;
+  max-height: 7em; /* 7 x 1 */
+
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 </style>