From 9c08db29d597aa45ccea9755d47a43e4aa8d9f4c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 00:25:52 +0200
Subject: [PATCH] refactor: change the client from table to flexbox

this makes the server, channel, and member list a constant size, making the text messages take up the entire remaining width
this also fixes the text wrapping you have already fixed on one of your branches

this change is required if we want to make the member list toggelable, or channel list resizable
---
 components/Channel.vue                        |  2 +-
 layouts/client.vue                            | 89 ++++++++-----------
 .../[serverId]/channels/[channelId].vue       | 13 ++-
 3 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/components/Channel.vue b/components/Channel.vue
index 0f48323..6bdc28b 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -30,7 +30,7 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 4dvh;
+	height: 1.5em;
 	white-space: nowrap;
 	align-items: center;
 }
diff --git a/layouts/client.vue b/layouts/client.vue
index 9ce451e..acb408c 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -8,21 +8,23 @@
 				</marquee>
 			</div>
 		</div>
-		<div id="left-column">
-			<NuxtLink id="home-button" href="/">
-				<img class="sidebar-icon" src="/public/icon.svg"/>
-			</NuxtLink>
-			<div id="servers-list">
-				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+		<div id = "page-content">
+			<div id="left-column">
+				<NuxtLink id="home-button" href="/">
+					<img class="sidebar-icon" src="/public/icon.svg"/>
+				</NuxtLink>
+				<div id="servers-list">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+						<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+					</NuxtLink>
+				</div>
+				<NuxtLink id="settings-menu" href="/settings">
+					<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
 				</NuxtLink>
 			</div>
-			<NuxtLink id="settings-menu" href="/settings">
-				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-			</NuxtLink>
+			<slot />
 		</div>
-		<slot />
 	</div>
 </template>
 
@@ -36,11 +38,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 <style>
 #client-root {
-	/* border: 1px solid white; */
 	height: 100dvh;
-	display: grid;
-	grid-template-columns: 1fr 4fr 18fr 4fr;
-	grid-template-rows: 4dvh auto;
+	width: 100dvw;
+	display: flex;
+	flex-direction: column;
 	text-align: center;
 }
 
@@ -50,17 +51,17 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 .visible {
 	opacity: 100%;
-	transition-duration: 500ms;
+	transition: opacity 500ms;
 }
 
 #homebar {
-	grid-row: 1;
-	grid-column: 1 / -1;
+	min-height: 4dvh;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
+	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 
@@ -70,32 +71,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	width: 100dvw;
 }
 
-#client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid var(--padding-color);
-}
-
-#__nuxt {
+#page-content {
 	display: flex;
-	flex-flow: column;
-}
-
-.grid-column {
-	padding-top: 1dvh;
-}
-
-#home {
-	padding-left: .5dvw;
-	padding-right: .5dvw;
-}
-
-.sidebar-icon {
-	width: 3rem;
-	height: 3rem;
-}
-
-#current-info {
-	grid-column: 2;
-	grid-row: 1;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }
 
 #left-column {
@@ -110,10 +90,25 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-top: 1.5dvh;
 }
 
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
+	width: 3.2rem;	
+}
+
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
+	min-width: 10rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.sidebar-icon {
+	width: 3rem;
+	height: 3rem;
 }
 
 #home-button {
@@ -126,10 +121,4 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	bottom: .25dvh
 }
 
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
-}
-
 </style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 32b8104..3003e9e 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -91,9 +91,8 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 #members-container {
-	padding-top: 1dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	min-width: 12rem;
+	padding-top: 1em;
 	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
@@ -103,14 +102,14 @@ function handleMemberClick(member: GuildMemberResponse) {
 	flex-direction: column;
 	overflow-y: scroll;
 	max-height: 92dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-left: 1.3em;
+	padding-right: 1.3em;
 	margin-top: 1dvh;
 }
 
 .member-item {
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 1.5em 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
 	gap: 1em;
@@ -122,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	gap: .5em;
 }
 
 .member-avatar {