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,17 +38,26 @@ function deletePost() {
 </script>
 
 <template>
+    <div class="flex flex-col flex-1 min-h-0">
         <Header>{{ post.title }}</Header>
         <div
-        class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
+            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
+                >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" />
+            <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">
+                <Button
+                    class="flex-1 border-box"
+                    v-if="!leftCap"
+                    @click="prevPost"
+                >
                     Prev
                 </Button>
                 <Button
@@ -63,6 +72,7 @@ function deletePost() {
                 >Delete</Button
             >
         </div>
+    </div>
 </template>
 
 <style scoped>