app.vue

@@ -18,10 +18,6 @@ body {
   margin: 0;
 }
 
-*:focus-visible {
-	outline: 1px solid rgb(150, 150, 150);
-}
-
 a {
   color: aquamarine;
 }

components/MessageArea.vue

@@ -6,8 +6,8 @@
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
-			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
-			<button id="submit-button" type="submit">
+			<input v-model="messageInput" type="text" name="message-input" id="message-box-input">
+			<button type="submit">
 				<Icon name="lucide:send" />
 			</button>
 		</form>
@@ -98,38 +98,27 @@ onMounted(async () => {
 <style scoped>
 
 #message-area {
-	display: grid;
-	grid-template-columns: 1fr;
-	grid-template-rows: 8fr 1fr;
-	justify-content: space-between;
 	padding-top: 3dvh;
+}
+
+#message-area {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
 }
 
 #message-box {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-content: center;
 	border: 1px solid rgb(70, 70, 70);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-top: 1dvh;
 }
 
-#message-form {
-	display: flex;
-	justify-content: center;
-	height: 60%;
-}
-
-#message-box-input {
-	width: 80%;
-	background-color: rgb(50, 50, 50);
-	border: none;
+#message-input {
+	width: 100%;
 }
 
 #messages {
@@ -139,14 +128,4 @@ onMounted(async () => {
 	gap: 1dvh;
 }
 
-#submit-button {
-	background-color: inherit;
-	border: none;
-	color: white;
-}
-
-#submit-button:hover {
-	background-color: rgb(40, 40, 40);
-}
-
 </style>