From f29e9373078f7f84a74f9bc55f38a147259f5fec Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Fri, 13 Mar 2026 17:52:27 +0000
Subject: [PATCH] Fix layout so content divs fill remaining space and scroll on
 overflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../vue/src/components/util/CommitHistory.vue | 10 ++--
 nginx/vue/src/views/home/Feed.vue             | 52 +++++++++++--------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/nginx/vue/src/components/util/CommitHistory.vue b/nginx/vue/src/components/util/CommitHistory.vue
index 4193ece..163170f 100644
--- a/nginx/vue/src/components/util/CommitHistory.vue
+++ b/nginx/vue/src/components/util/CommitHistory.vue
@@ -27,20 +27,20 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="justify-center text-center">
+    <div class="flex flex-col text-center h-full">
         <Header class="text-left">Commits</Header>
 
-        <div v-if="isLoading">
+        <div v-if="isLoading" class="flex-1 overflow-y-auto">
             <p>Loading latest activity...</p>
         </div>
 
-        <div v-else-if="hasError">
+        <div v-else-if="hasError" class="flex-1 overflow-y-auto">
             <p>Could not fetch feed. Please try again later.</p>
         </div>
 
         <div
             v-else-if="feed"
-            class="flex-col justify-center flex overflow-y-scroll"
+            class="flex-1 flex flex-col justify-center overflow-y-auto"
         >
             <h3>Last git activity</h3>
             <img
@@ -56,7 +56,7 @@ onMounted(() => {
             <small> {{ new Date(feed.created).toLocaleString() }}</small>
         </div>
 
-        <div v-else>
+        <div v-else class="flex-1 overflow-y-auto">
             <p>No activity found.</p>
         </div>
     </div>
diff --git a/nginx/vue/src/views/home/Feed.vue b/nginx/vue/src/views/home/Feed.vue
index 99c121b..ee5d40b 100644
--- a/nginx/vue/src/views/home/Feed.vue
+++ b/nginx/vue/src/views/home/Feed.vue
@@ -38,30 +38,40 @@ function deletePost() {
 </script>
 
 <template>
-    <Header>{{ post.title }}</Header>
-    <div
-        class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
-    >
-        <small
-            >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
+    <div class="flex flex-col flex-1 min-h-0">
+        <Header>{{ post.title }}</Header>
+        <div
+            class="flex flex-col flex-1 min-h-0 p-1 overflow-auto text-left items-start justify-start"
         >
-        <small>By: {{ post.author.username }}</small>
-        <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
-        <div class="flex flex-row w-full">
-            <Button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
-                Prev
-            </Button>
-            <Button
-                class="flex-1 border-box"
-                v-if="!rightCap"
-                @click="nextPost"
+            <small
+                >Created at:
+                {{ new Date(post.createdAt).toLocaleString() }}</small
+            >
+            <small>By: {{ post.author.username }}</small>
+            <Markdown
+                class="flex-1 border-box text-wrap"
+                :source="post.content"
+            />
+            <div class="flex flex-row w-full">
+                <Button
+                    class="flex-1 border-box"
+                    v-if="!leftCap"
+                    @click="prevPost"
+                >
+                    Prev
+                </Button>
+                <Button
+                    class="flex-1 border-box"
+                    v-if="!rightCap"
+                    @click="nextPost"
+                >
+                    Next
+                </Button>
+            </div>
+            <Button class="w-full" v-if="userOwnsPost" @click="deletePost"
+                >Delete</Button
             >
-                Next
-            </Button>
         </div>
-        <Button class="w-full" v-if="userOwnsPost" @click="deletePost"
-            >Delete</Button
-        >
     </div>
 </template>