From 94fa7dc1c0c3df4cc82e6577680737e4cdb9dabb Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:30:24 +0200
Subject: [PATCH 1/5] feat: add top margin for message box

---
 components/MessageArea.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index d58b037..f5a7081 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -115,6 +115,7 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
+	margin-top: 1dvh;
 }
 
 #message-input {

From fb85a2a33fdd17868e859b525587e26fd8b78a1b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:52:02 +0200
Subject: [PATCH 2/5] feat: improve styling of message box area

---
 components/MessageArea.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index f5a7081..3d4c231 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -98,19 +98,21 @@ onMounted(async () => {
 <style scoped>
 
 #message-area {
-	padding-top: 3dvh;
-}
-
-#message-area {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
+	padding-top: 3dvh;
 	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;
@@ -118,8 +120,16 @@ onMounted(async () => {
 	margin-top: 1dvh;
 }
 
-#message-input {
-	width: 100%;
+#message-form {
+	display: flex;
+	justify-content: center;
+	height: 60%;
+}
+
+#message-box-input {
+	width: 80%;
+	background-color: rgb(50, 50, 50);
+	border: none;
 }
 
 #messages {

From cedf3c201fbf51c05e115cb6d0e73eb5031be23b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:52:53 +0200
Subject: [PATCH 3/5] feat: set focus outline of all items to light gray

---
 app.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app.vue b/app.vue
index b20c5ab..47873f0 100644
--- a/app.vue
+++ b/app.vue
@@ -18,6 +18,10 @@ body {
   margin: 0;
 }
 
+*:focus-visible {
+	outline: 1px solid rgb(150, 150, 150);
+}
+
 a {
   color: aquamarine;
 }

From e1578a1302d43477a20eecf20084fd68afd2afe0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:58:28 +0200
Subject: [PATCH 4/5] feat: disable input history in message text box

---
 components/MessageArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 3d4c231..72e38d9 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -6,7 +6,7 @@
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
-			<input v-model="messageInput" type="text" name="message-input" id="message-box-input">
+			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
 			<button type="submit">
 				<Icon name="lucide:send" />
 			</button>

From 454633720b01f392ca2710771e3ed3f506dc29c8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:58:43 +0200
Subject: [PATCH 5/5] feat: styled button a bit

---
 components/MessageArea.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 72e38d9..3389475 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -7,7 +7,7 @@
 	<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 type="submit">
+			<button id="submit-button" type="submit">
 				<Icon name="lucide:send" />
 			</button>
 		</form>
@@ -139,4 +139,14 @@ onMounted(async () => {
 	gap: 1dvh;
 }
 
+#submit-button {
+	background-color: inherit;
+	border: none;
+	color: white;
+}
+
+#submit-button:hover {
+	background-color: rgb(40, 40, 40);
+}
+
 </style>
\ No newline at end of file