layouts/client.vue

@@ -123,6 +123,30 @@ 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;

pages/servers/[serverId]/channels/[channelId].vue

@@ -24,7 +24,6 @@
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<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" />
@@ -32,7 +31,6 @@
 				<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
 			</div>
 		</div>
-		</div>
 	</NuxtLayout>
 </template>
 
@@ -81,6 +79,18 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
+.member-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+}
+
+#members-list {
+	padding-top: 3dvh;
+}
 
 #middle-left-column {
 	padding-left: 1dvw;
@@ -88,29 +98,12 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-#members-container {
+#members-list {
-	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;
@@ -123,9 +116,4 @@ function toggleInvitePopup(e: Event) {
 	border-radius: 50%;
 }
 
-.member-display-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 </style>