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] 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