Fix layout so content divs fill remaining space and scroll on overflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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>

nginx/vue/src/views/home/Feed.vue

@@ -38,30 +38,40 @@ function deletePost() {
 </script>
 
 <template>
-    <Header>{{ post.title }}</Header>
+    <div class="flex flex-col flex-1 min-h-0">
-    <div
+        <Header>{{ post.title }}</Header>
-        class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
+        <div
-    >
+            class="flex flex-col flex-1 min-h-0 p-1 overflow-auto text-left items-start justify-start"
-        <small
-            >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
         >
-        <small>By: {{ post.author.username }}</small>
+            <small
-        <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
+                >Created at:
-        <div class="flex flex-row w-full">
+                {{ new Date(post.createdAt).toLocaleString() }}</small
-            <Button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
+            >
-                Prev
+            <small>By: {{ post.author.username }}</small>
-            </Button>
+            <Markdown
-            <Button
+                class="flex-1 border-box text-wrap"
-                class="flex-1 border-box"
+                :source="post.content"
-                v-if="!rightCap"
+            />
-                @click="nextPost"
+            <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>