From 9a2fe8fb373c006ac074031057d0fe4e5b90fa62 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 00:43:23 +0200
Subject: [PATCH] refactor: change a lot of dynamic sizes to em and rem

this makes the client feel a LOT snappier
---
 components/Button.vue                         |  2 +-
 components/Channel.vue                        |  4 ++--
 components/MessageArea.vue                    |  1 +
 layouts/client.vue                            | 20 ++++++++--------
 .../[serverId]/channels/[channelId].vue       | 23 ++++++++++---------
 5 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/components/Button.vue b/components/Button.vue
index fb44cf2..66706de 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -21,7 +21,7 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.7dvh 1.2dvw;
+	padding: 0.4em 0.75em;
 	font-size: 1.1em;
 	transition: background-color 0.2s;
 
diff --git a/components/Channel.vue b/components/Channel.vue
index 6bdc28b..98f210e 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -23,8 +23,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link {
 	text-decoration: none;
 	color: inherit;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
+	padding-left: .25em;
+	padding-right: .25em;
 }
 
 .channel-list-link-container {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 18b9ac5..244b239 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -246,6 +246,7 @@ router.beforeEach((to, from, next) => {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
+	flex-grow: 1;
 }
 
 #message-box {
diff --git a/layouts/client.vue b/layouts/client.vue
index b98e304..469800d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -74,27 +74,27 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 #left-column {
 	display: flex;
 	flex-direction: column;
-	gap: 2dvh;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
+	gap: .75em;
+	padding-left: .25em;
+	padding-right: .25em;
 	border-right: 1px solid var(--padding-color);
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
-	padding-top: 1.5dvh;
+	padding-top: .5em;
 }
 
 #servers-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	gap: 1em;
 	width: 3.2rem;	
 }
 
 #middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-left: .25em;
+	padding-right: .25em;
 	border-right: 1px solid var(--padding-color);
-	min-width: 10rem;
+	min-width: 10em;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
@@ -106,12 +106,12 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 #home-button {
 	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: 1dvh;
+	padding-bottom: .375em;
 }
 
 #settings-menu {
 	position: absolute;
-	bottom: .25dvh
+	bottom: .25em
 }
 
 </style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b5ee86a..04d56f9 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -27,6 +27,7 @@
 		<div id="members-container">
 			<div id="members-list">
 				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -83,35 +84,35 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>
 
 #middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-left: .5em;
+	padding-right: .5em;
 	border-right: 1px solid var(--padding-color);
 	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
-	min-width: 12rem;
-	padding-top: 1em;
+	width: 12rem;
 	border-left: 1px solid var(--padding-color);
 }
 
 #members-list {
 	display: flex;
 	flex-direction: column;
+	overflow-x: hidden;
 	overflow-y: scroll;
-	max-height: 92dvh;
-	padding-left: 1.3em;
-	padding-right: 1.3em;
-	margin-top: 1dvh;
+	padding-left: 1.25em;
+	padding-right: 1.25em;
+	padding-top: 0.75em;
+	padding-bottom: 0.75em;
+	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
 }
 
 .member-item {
-	display: grid;
-	grid-template-columns: 1.5em 1fr;
+	display: flex;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: 1em;
+	gap: .5em;
 	align-items: center;
 	text-align: left;
 	cursor: pointer;