diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index 958586e..717ba93 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/nginx/vue/src/components/util/Chat.vue
@@ -79,9 +79,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex-col flex">
+  <div class="flex-col flex min-h-0">
     <Header>Chat</Header>
-    <div ref="messagesContainer" class="flex flex-col overflow-y-auto overflow-x-hidden p-2 min-w-0">
+    <div ref="messagesContainer" class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2 min-w-0">
       <p v-for="message in messages" :key="message.id" class="break-words min-w-0 w-full">
         <span class="text-tertiary">{{ message.authorId }}:</span>
         <template
diff --git a/nginx/vue/src/components/util/CommitHistory.vue b/nginx/vue/src/components/util/CommitHistory.vue
index 8f73421..8d14661 100644
--- a/nginx/vue/src/components/util/CommitHistory.vue
+++ b/nginx/vue/src/components/util/CommitHistory.vue
@@ -8,7 +8,7 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
 </script>
 
 <template>
-  <div class="flex flex-col text-center h-full">
+  <div class="flex flex-col text-center min-h-0 h-full">
     <Header class="text-left">Commits</Header>
 
     <div v-if="!loaded" class="flex-1 overflow-y-auto">
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index 75f771c..a9ac48f 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -24,14 +24,12 @@ import Consumption from "./Consumption.vue";
 
 <template>
     <main class="halftone justify-center flex flex-row w-full h-full">
-        <div class="outerWrap h-fit flex flex-row">
-            <div
-                class="sidebar place-content-between flex-1 flex flex-col m-10 w-60 gap-2"
-            >
+        <div class="outerWrap flex flex-row" style="height: 310mm">
+            <div class="sidebar flex-1 flex flex-col m-10 w-60 gap-2">
                 <div
-                    class="flex flex-col background-children border-children gap-2"
+                    class="flex-1 flex flex-col min-h-0 background-children border-children gap-2"
                 >
-                    <Chat class="h-306" />
+                    <Chat class="flex-1 min-h-0" />
                 </div>
                 <div>
                     <Miku class="border-tertiary border bg-bg_secondary" />
@@ -53,16 +51,14 @@ import Consumption from "./Consumption.vue";
                 <!-- <Gym class="gym" /> -->
                 <Gym2 class="gym" />
             </div>
-            <div
-                class="sidebar place-content-between flex-1 flex flex-col m-10 w-60 gap-2"
-            >
+            <div class="sidebar flex-1 flex flex-col m-10 w-60 gap-2">
                 <div
-                    class="flex flex-col background-children border-children gap-2"
+                    class="flex-1 flex flex-col min-h-0 background-children border-children gap-2"
                 >
                     <Time />
                     <Timer />
                     <Radio />
-                    <CommitHistory class="h-120" />
+                    <CommitHistory class="flex-1" />
 
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <MusicPlayer /> -->