From 78518cee6d9527efe70f904af3e7a5cc9befc98a Mon Sep 17 00:00:00 2001
From: AndrewVFranco <129307231+AndrewVFranco@users.noreply.github.com>
Date: Tue, 21 Apr 2026 01:32:39 -0700
Subject: [PATCH] Fix mobile UI rendering

---
 frontend/src/App.css | 37 ++++++++++++++-----------------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 201bb9f..8a1fb89 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -106,11 +106,11 @@ header.header {
 .layout {
   display: flex;
   height: 100vh;
-  padding-top: var(--header);
+  padding-top: var(--header); /* Pushes content down below fixed header */
   overflow: hidden;
 }
 
-/* SIDEBAR CONTAINER (New wrapper for mobile logic) */
+/* SIDEBAR CONTAINER (Desktop default) */
 .sidebar-container {
   width: var(--sidebar);
   flex-shrink: 0;
@@ -539,16 +539,8 @@ aside.sidebar {
 }
 
 .mobile-overlay {
-    display: block;
-    position: absolute;
-    top: var(--header); /* Start below the fixed header */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 40;
-    backdrop-filter: blur(2px);
-  }
+  display: none;
+}
 
 @media (max-width: 768px) {
   header.header {
@@ -560,19 +552,18 @@ aside.sidebar {
     display: block;
   }
 
-  /* Make layout relative for absolute positioning of sidebar */
   .layout {
-    position: relative;
     flex-direction: column;
   }
 
-  /* Turn Sidebar into a slide-out drawer */
+  /* Bulletproof fixed positioning for mobile drawer */
   .sidebar-container {
-    position: absolute;
-    top: var(--header); /* Start below the fixed header */
-    bottom: 0;          /* Stretch to the bottom */
-    height: auto;       /* Override the desktop 100% height */
-    left: -100%;
+    position: fixed;
+    top: var(--header);
+    bottom: 0;
+    height: calc(100vh - var(--header)); /* Ensures it exactly fills the remaining space */
+    left: -100%; /* Hidden off-screen */
+    z-index: 90; /* Just below the header */
     box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
   }
 
@@ -594,13 +585,13 @@ aside.sidebar {
   /* Show the darkening overlay */
   .mobile-overlay {
     display: block;
-    position: absolute;
-    top: 0;
+    position: fixed;
+    top: var(--header);
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
-    z-index: 40;
+    z-index: 80; /* Just below the sidebar */
     backdrop-filter: blur(2px);
   }