From e55c88c742a568d7b737a7bc34b39120341594c8 Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Tue, 31 Mar 2026 22:56:49 +0200
Subject: [PATCH] Update `base.html` layout: adjust styles for improved height
 handling, overflow behavior, and consistency in responsive designs.

---
 templates/base.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 13a250f..beef325 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -39,7 +39,7 @@
         </style>
     </head>
 
-    <body class="flex flex-col h-screen" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <body class="flex flex-col h-dvh overflow-hidden" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
         <!-- NAVBAR -->
         <header id="mainNavbar" class="navbar-shrink navbar bg-base-100 sticky top-0 z-50 shadow">
             <div class="flex-none lg:hidden">
@@ -84,7 +84,7 @@
             </div>
         </header>
 
-        <div class="drawer lg:drawer-open flex-1">
+        <div class="drawer lg:drawer-open flex-1 min-h-0">
             <!-- Hidden checkbox for mobile sidebar -->
             <input type="checkbox" id="sidebar-toggle" class="drawer-toggle">
 
@@ -92,7 +92,7 @@
             <aside class="drawer-side z-60 lg:z-auto min-w-fit h-full lg:h-fit">
                 <label for="sidebar-toggle" class="drawer-overlay"></label>
 
-                <div class="w-64 bg-base-100 border-r p-4 h-full lg:h-fit lg:border lg:border-base-300 lg:m-4 lg:mr-2 lg:rounded-xl lg:min-h-full">
+                <div class="w-64 bg-base-100 border-r p-4 h-full lg:h-fit lg:border lg:border-base-300 lg:m-4 lg:mr-2 lg:rounded-xl">
                     <ul class="menu w-full">
                         {% block sidebar %}{% endblock sidebar %}
                     </ul>
@@ -100,8 +100,8 @@
             </aside>
 
             <!-- MAIN CONTENT-->
-            <div class="drawer-content flex w-full">
-                <main class="bg-base-100 border border-base-300 rounded-xl m-4 ml-2 p-6 w-full">
+            <div class="drawer-content flex w-full overflow-y-auto">
+                <main class="bg-base-100 border border-base-300 rounded-xl m-4 ml-2 p-6 w-full h-fit">
                     {% include "backend/partials/messages.html" %}
 
                     <div id="content">
@@ -115,7 +115,7 @@
         </div>
 
         <!-- FOOTER -->
-        <footer class="footer footer-center p-4 bg-neutral text-neutral-content mt-auto">
+        <footer class="footer footer-center p-4 bg-neutral text-neutral-content">
             <p>&copy; {% now "Y" %} TeamForge — All rights reserved.</p>
         </footer>
 
