components/MessageArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="message-area">
-	<div id="messages" ref="messagesElement">
+	<div id="messages">
 		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
 			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
 	</div>
@@ -29,7 +29,7 @@ if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
-const messages = ref<MessageResponse[]>([]);
+const messages = ref(messagesRes ?? []);
 
 const displayNames = ref<Record<string, string>>({});
 
@@ -37,18 +37,6 @@ const route = useRoute();
 
 const messageInput = ref<string>();
 
-const messagesElement = ref<HTMLDivElement>();
-
-if (messagesRes) messages.value = messagesRes;
-	const displayNamesArr: Record<string, string> = {};
-	for (const message of messages.value) {
-		if (!displayNamesArr[message.user_uuid]) {
-			const displayName = await getDisplayName(message.user_uuid);
-			displayNamesArr[message.user_uuid] = displayName;
-		}
-	}
-	displayNames.value = displayNamesArr;
-
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
 const { refresh } = useAuth();
@@ -100,7 +88,14 @@ function sendMessage(e: Event) {
 }
 
 onMounted(async () => {
-	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
+	const displayNamesArr: Record<string, string> = {};
+	for (const message of messages.value) {
+		if (!displayNamesArr[message.user_uuid]) {
+			const displayName = await getDisplayName(message.user_uuid);
+			displayNamesArr[message.user_uuid] = displayName;
+		}
+	}
+	displayNames.value = displayNamesArr;
 });
 
 </script>
@@ -122,9 +117,17 @@ onMounted(async () => {
 
 #message-box {
 	border: 1px solid rgb(70, 70, 70);
-	padding-bottom: 1dvh;
-	padding-top: 1dvh;
 	margin-bottom: 1dvh;
+	height: 7%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+#message-form {
+	height: 50%;
+	width: 100%;
 }
 
 #message-input {