Refine responsive CSS for mobile sidebar and main content

frontend/style.css

@@ -316,29 +316,36 @@ button:hover {
 @media (max-width: 768px) {
     .app-layout {
         flex-direction: column;
+        height: auto; /* Allow content to dictate height */
+        min-height: 100vh; /* Ensure it takes at least full viewport height */
     }
 
     .sidebar {
         width: 100%;
-        height: auto;
-        position: relative; /* Change from fixed to relative */
-        padding: 1rem;
-        box-shadow: none;
+        height: 100vh; /* Full viewport height */
+        position: fixed; /* Keep it fixed for overlay effect */
+        top: 0;
+        left: 0;
+        padding: 1.5rem;
         transform: translateX(-100%); /* Hide sidebar by default */
         transition: transform 0.3s ease;
+        z-index: 1000; /* Ensure it's on top of everything */
+        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+        overflow-y: auto; /* Allow sidebar content to scroll if needed */
     }
 
     .sidebar.active {
-        transform: translateX(0);
+        transform: translateX(0); /* Slide in when active */
     }
 
     .sidebar.collapsed {
+        /* On mobile, 'collapsed' means hidden, so it's the same as default hidden state */
         width: 100%;
         transform: translateX(-100%);
     }
 
     .sidebar-header {
-        margin-bottom: 1rem;
+        margin-bottom: 2rem;
     }
 
     .sidebar-header h2 {
@@ -347,11 +354,15 @@ button:hover {
 
     #sidebar-toggle {
         display: block; /* Ensure toggle is visible */
-        transform: rotate(0deg) !important; /* Reset rotation */
+        position: absolute; /* Position relative to sidebar */
+        right: 1rem;
+        top: 1rem;
+        color: var(--text-color-light);
+        z-index: 1001; /* Ensure toggle is clickable */
     }
 
     .sidebar.active #sidebar-toggle {
-        transform: rotate(180deg) !important; /* Rotate when active */
+        transform: rotate(180deg); /* Rotate when active */
     }
 
     .sidebar-nav .nav-link .nav-text {
@@ -367,8 +378,11 @@ button:hover {
     .main-content {
         margin-left: 0; /* Remove left margin */
         width: 100%; /* Take full width */
+        min-height: 100vh; /* Ensure main content takes at least full viewport height */
         padding: 1rem; /* Adjust padding */
         overflow-y: auto; /* Ensure scrolling */
+        background-size: cover; /* Ensure background covers well */
+        background-position: center;
     }
 
     .main-content.collapsed {
@@ -380,6 +394,10 @@ button:hover {
         padding: 1rem; /* Adjust container padding */
     }
 
+    .page {
+        max-width: 100%; /* Allow pages to take full width */
+    }
+
     .card {
         padding: 1.5rem; /* Adjust card padding */
     }