Fixed Recurring Problem of Mobile UI

static/script.js

@@ -11,13 +11,13 @@ document.addEventListener("DOMContentLoaded", () => {
     const refreshChatButton = document.getElementById("refresh-chat-button");
     const menuToggle = document.getElementById("menu-toggle");
     
-    // --- New elements for mobile menu ---
+    // --- Elements for mobile menu ---
     const closeMenuButton = document.getElementById("close-menu-button");
     const pageOverlay = document.getElementById("page-overlay");
 
     let conversationState = {};
 
-    // --- NEW: Functions to open and close the menu ---
+    // --- Functions to open and close the mobile menu ---
     const openMenu = () => {
         leftColumn.classList.add('active');
         pageOverlay.classList.add('active');
@@ -115,7 +115,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
         const featureName = featureCard.dataset.value;
         sendMessage(featureName);
-        closeMenu(); // --- MODIFIED: Close menu after selection
+        closeMenu(); // Close menu after selection
     });
 
     const updatePlaceholder = () => {

static/style.css

@@ -1,4 +1,11 @@
 /* General Setup */
+html, body {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Prevents horizontal scroll */
+}
+
+/* General Setup 2*/
 body {
     font-family: 'Inter', sans-serif;
     margin: 0;
@@ -486,6 +493,95 @@ body.dark .left-column {
     }
 
     .left-column {
-        padding-top: 4rem; /* Add padding to make space for the close button */
+        padding-top: 4rem;
+    }
+}
+
+/* --- Mobile Menu Elements*/
+.menu-toggle-button { display: none; background: none; border: none; color: white; cursor: pointer; padding: 0 1rem 0 0; }
+#page-overlay { display: none; }
+.close-menu-button { display: none; }
+
+/* --- Mobile Responsiveness --- */
+@media (max-width: 768px) {
+    body.menu-open {
+        overflow: hidden; /* Prevent background from scrolling when menu is open */
+    }
+    .main-container {
+        flex-direction: column;
+        padding: 0;
+        gap: 0;
+        height: 100vh;
+    }
+    /* Left Column becomes slide-out menu */
+    .left-column {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 80%;
+        max-width: 300px;
+        height: 100%;
+        z-index: 1000;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        border-right: 1px solid;
+        padding: 1rem;
+        padding-top: 4rem; /* Make space for close button */
+        box-sizing: border-box;
+        overflow-y: auto;
+    }
+    .left-column.active {
+        transform: translateX(0);
+    }
+    body.light .left-column { background-color: #f8f9fa; }
+    body.dark .left-column { background-color: #1e1e1e; }
+
+    /* Right Column takes full width */
+    .right-column {
+        width: 100%;
+        height: 100%;
+    }
+    .chat-window {
+        border-radius: 0;
+        box-shadow: none;
+        height: 100%;
+    }
+    .chat-header {
+        border-radius: 0;
+    }
+
+    /* Show Mobile Menu Elements */
+    .menu-toggle-button {
+        display: block;
+    }
+    #page-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        pointer-events: none;
+    }
+    #page-overlay.active {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    .close-menu-button {
+        display: block;
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        background: none;
+        border: none;
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 1;
+        cursor: pointer;
     }
+    body.light .close-menu-button { color: #212529; }
+    body.dark .close-menu-button { color: #e9ecef; }
 }