From f6523ae97f92a75efeb6ede3947c0eaf99f41c04 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:02:58 +0200
Subject: [PATCH 1/3] feat: remove unnecessary styles from client layout

---
 layouts/client.vue | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 6c629da..73a40d6 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -123,30 +123,6 @@ const members = [
 	grid-row: 1;
 }
 
-#test {
-	grid-column: 3;
-	grid-row: 1;
-}
-
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-#message-history,
-#members-list {
-	padding-top: 3dvh;
-}
-
-#message-history {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding-left: 3dvw;
-	padding-right: 3dvw;
-}
-
 #left-column {
 	display: flex;
 	flex-direction: column;

From 532aba5c21a75607075f969b0c4316a3bfb0a732 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:03:19 +0200
Subject: [PATCH 2/3] feat: merge two #member-list blocks

---
 pages/servers/[serverId]/channels/[channelId].vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 4f3e4ec..debe6a5 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -88,10 +88,6 @@ function toggleInvitePopup(e: Event) {
 	gap: .5em;
 }
 
-#members-list {
-	padding-top: 3dvh;
-}
-
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
@@ -99,6 +95,7 @@ function toggleInvitePopup(e: Event) {
 }
 
 #members-list {
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);

From e8d37af75e25cefeec153b946014125e07ce649e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:35:36 +0200
Subject: [PATCH 3/3] feat: update appearance of members list

---
 .../[serverId]/channels/[channelId].vue       | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index debe6a5..3975e5b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -24,11 +24,13 @@
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-list">
-			<div class="member-item" v-for="member of members">
-				<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-				<Icon v-else class="member-avatar" name="lucide:user" />
-				<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+		<div id="members-container">
+			<div id="members-list">
+				<div class="member-item" v-for="member of members">
+					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
+					<Icon v-else class="member-avatar" name="lucide:user" />
+					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+				</div>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -79,14 +81,6 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-}
 
 #middle-left-column {
 	padding-left: 1dvw;
@@ -94,13 +88,29 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-#members-list {
+#members-container {
 	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#members-list {
+	display: grid;
+	grid-template-columns: auto;
+}
+
+.member-item {
+	display: grid;
+	grid-template-columns: 2dvw auto;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: 1em;
+	align-items: center;
+	text-align: left;
+	
+}
+
 #channels-list {
 	display: flex;
 	flex-direction: column;
@@ -113,4 +123,9 @@ function toggleInvitePopup(e: Event) {
 	border-radius: 50%;
 }
 
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 </style>
\ No newline at end of file