From d5065d19e0e022e599e2fcee88cb84fc2420780b Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Fri, 13 Mar 2026 15:30:34 +0000
Subject: [PATCH] Make sidebars take up full space

---
 nginx/vue/src/components/util/Chat.vue | 129 +++++++++++++------------
 nginx/vue/src/views/home/Home.vue      |  10 +-
 2 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index ba0fb02..4a00762 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/nginx/vue/src/components/util/Chat.vue
@@ -80,68 +80,77 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="flex flex-col">
+    <div class="flex-1 flex-col flex">
         <Header>Chat</Header>
-        <div
-            ref="messagesContainer"
-            class="flex flex-col flex-1 overflow-y-auto p-2"
-        >
-            <p v-for="message in messages" :key="message.id">
-                <span class="text-tertiary">{{ message.authorId }}:</span>
-                <template
-                    v-for="(part, i) in parseMessageParts(message.text || '')"
-                    :key="i"
-                >
-                    <a
-                        v-if="part.type === 'link'"
-                        :href="part.value"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-primary underline"
-                        >{{ part.value }}</a
-                    >
-                    <span v-else>{{ part.value }}</span>
-                </template>
-                <template
-                    v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)"
-                >
-                    <img
-                        v-if="isImageUrl(message.fileUrl)"
-                        :src="message.fileUrl"
-                        class="max-w-xs max-h-48 rounded"
-                        @load="scrollToBottom"
-                    />
-                    <video
-                        v-else-if="isVideoUrl(message.fileUrl)"
-                        :src="message.fileUrl"
-                        controls
-                        class="max-w-xs max-h-48 rounded"
-                        @loadedmetadata="scrollToBottom"
-                    />
-                    <a
-                        v-else
-                        :href="message.fileUrl"
-                        target="_blank"
-                        class="underline"
-                        >{{ message.fileUrl.split("/").pop() }}</a
-                    >
-                </template>
-            </p>
-        </div>
-        <input v-model="messageInput" @keyup.enter="sendMessage" />
-        <input
-            ref="fileInput"
-            type="file"
-            class="hidden"
-            @change="onFileSelected"
-        />
-        <div class="flex justify-between">
-            <Button @click="sendMessage">Send</Button>
-            <Button v-if="authStore.user.admin" @click="fileInput.click()"
-                >Attach</Button
+        <div class="flex-col flex flex-1">
+            <div
+                ref="messagesContainer"
+                class="flex flex-col flex-1 overflow-y-auto p-2"
             >
-            <div class="flex gap-2">
-                <Button @click="scrollToBottom">Bottom</Button>
+                <p v-for="message in messages" :key="message.id">
+                    <span class="text-tertiary">{{ message.authorId }}:</span>
+                    <template
+                        v-for="(part, i) in parseMessageParts(
+                            message.text || '',
+                        )"
+                        :key="i"
+                    >
+                        <a
+                            v-if="part.type === 'link'"
+                            :href="part.value"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-primary underline"
+                            >{{ part.value }}</a
+                        >
+                        <span v-else>{{ part.value }}</span>
+                    </template>
+                    <template
+                        v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)"
+                    >
+                        <img
+                            v-if="isImageUrl(message.fileUrl)"
+                            :src="message.fileUrl"
+                            class="max-w-xs max-h-48 rounded"
+                            @load="scrollToBottom"
+                        />
+                        <video
+                            v-else-if="isVideoUrl(message.fileUrl)"
+                            :src="message.fileUrl"
+                            controls
+                            class="max-w-xs max-h-48 rounded"
+                            @loadedmetadata="scrollToBottom"
+                        />
+                        <a
+                            v-else
+                            :href="message.fileUrl"
+                            target="_blank"
+                            class="underline"
+                            >{{ message.fileUrl.split("/").pop() }}</a
+                        >
+                    </template>
+                </p>
+            </div>
+            <div>
+                <input v-model="messageInput" @keyup.enter="sendMessage" />
+                <input
+                    ref="fileInput"
+                    type="file"
+                    class="hidden"
+                    @change="onFileSelected"
+                />
+                <div class="flex gap-2">
+                    <Button class="flex-1" @click="sendMessage">Send</Button>
+                    <Button
+                        v-if="authStore.user.admin"
+                        class="flex-1"
+                        @click="fileInput.click()"
+                        >Attach</Button
+                    >
+                    <Button class="flex-1" @click="scrollToBottom"
+                        >Bottom</Button
+                    >
+                </div>
             </div>
         </div>
     </div>
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index 797700a..1d39bbd 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -28,8 +28,10 @@ import Consumption from "./Consumption.vue";
             <div
                 class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between"
             >
-                <div class="border-children background-children">
-                    <Chat class="h-200" />
+                <div
+                    class="flex flex-col background-children border-children flex-1 gap-2"
+                >
+                    <Chat class="flex-1" />
                 </div>
                 <div>
                     <Miku class="border-tertiary border bg-bg_secondary" />
@@ -52,7 +54,7 @@ import Consumption from "./Consumption.vue";
                 <Gym2 class="gym" />
             </div>
             <div
-                class="sidebar place-content-between flex-1 flex flex-col m-10 w-60"
+                class="sidebar place-content-between flex-1 flex flex-col m-10 w-60 gap-2"
             >
                 <div
                     class="flex flex-col background-children border-children flex-1 gap-2"
@@ -60,7 +62,7 @@ import Consumption from "./Consumption.vue";
                     <Time />
                     <Timer />
                     <Radio />
-                    <CommitHistory class="h-100 overflow-y-scroll" />
+                    <CommitHistory class="flex-1 overflow-y-scroll" />
 
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <MusicPlayer /> -->