From 26ef3671e9b4e4517ae8757f848ebc1d6ca7a72a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:57:17 +0200
Subject: [PATCH] style: increase message padding to make highlight more
 pleasant

---
 components/Message.vue     | 10 +++++++---
 components/MessageArea.vue |  8 ++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 80d7b9a..0e37895 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -188,15 +188,19 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style scoped>
 .message {
-	text-align: left;
-	/* border: 1px solid lightcoral; */
 	display: grid;
 	grid-template-columns: 4rem 1fr;
 	align-items: center;
-	width: 100%;
+
+	text-align: left;
+	/* -4 dvw due to 2dvw of padding on both sides */
+	width: calc(100% - 4dvw);
 	overflow-wrap: anywhere;
+
 	padding-top: .2rem;
 	padding-bottom: .2rem;
+	padding-left: 2dvw;
+	padding-right: 2dvw;
 }
 
 .message-reply-preview {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index abec6a8..900e053 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -320,8 +320,6 @@ router.beforeEach((to, from, next) => {
 #message-area {
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	overflow: hidden;
 	flex-grow: 1;
 }
@@ -329,8 +327,8 @@ router.beforeEach((to, from, next) => {
 #message-box {
 	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
-	margin-left: 1dvw;
-	margin-right: 1dvw;
+	margin-left: 2dvw;
+	margin-right: 2dvw;
 
 	padding-left: 2%;
 	padding-right: 2%;
@@ -382,8 +380,6 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	padding-bottom: 1em;
 }