Update chat.html

chat.html

@@ -303,19 +303,23 @@
         /* Main Content */
         .main-content {
             margin-left: 250px;
-            padding: 20px;
-            min-height: 100vh;
+            padding: 0;
+            height: 100vh;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
         }
 
         .header-bar {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 10px;
+            padding: 15px 20px;
+            flex-shrink: 0;
         }
 
         .header-bar h1 {
-            font-size: 32px;
+            font-size: 24px;
             color: var(--olive-light);
         }
 
@@ -324,10 +328,10 @@
             height: 26px;
             background: var(--olive-light);
             border-radius: 13px;
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1002;
+            position: relative;
+            top: auto;
+            right: auto;
+            z-index: 1;
             cursor: pointer;
             transition: all 0.3s ease;
         }
@@ -357,18 +361,11 @@
         .chat-area {
             display: flex;
             flex-direction: column;
-            height: calc(100vh - 110px);
-            height: calc(100dvh - 110px); /* Better mobile support */
-            border-radius: 12px;
+            flex: 1;
+            height: auto;
+            border-radius: 0;
             overflow: hidden;
-        }
-
-        .light-mode .chat-area {
-            background: var(--card-light);
-        }
-
-        .dark-mode .chat-area {
-            background: var(--card-dark);
+            background: transparent;
         }
 
         .messages-container {
@@ -710,8 +707,11 @@
 
             .main-content {
                 margin-left: 0;
-                padding: 60px 10px 10px 10px;
-                height: 100dvh; /* Full viewport height on mobile */
+                padding: 0;
+            }
+
+            .header-bar {
+                padding-left: 70px; /* Space for menu toggle */
             }
 
             .message-content {
@@ -862,9 +862,6 @@
     <!-- Mobile Menu Toggle -->
     <button class="menu-toggle" id="menuToggle">☰</button>
 
-    <!-- Theme Toggle -->
-    <div class="theme-toggle" id="themeToggle"></div>
-
     <!-- Sidebar Overlay for Mobile -->
     <div class="sidebar-overlay" id="sidebarOverlay"></div>
 
@@ -889,6 +886,7 @@
     <div class="main-content">
         <div class="header-bar">
             <h1>Welcome 👋</h1>
+            <div class="theme-toggle" id="themeToggle"></div>
         </div>
 
         <!-- Chat Area -->
@@ -1487,10 +1485,6 @@
                     return false;
                 }
 
-                if (role === CONFIG.ROLES.STUDENT) {
-                    return true;
-                }
-
                 try {
                     const response = await api.checkAuth();
 
@@ -1507,6 +1501,20 @@
                         return false;
                     }
                     
+                    // Update Welcome Message with Name
+                    if (userData.email) {
+                        const namePart = userData.email.split('@')[0];
+                        // Replace dots/underscores with spaces and capitalize
+                        const displayName = namePart
+                            .replace(/[._]/g, ' ')
+                            .split(' ')
+                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                            .join(' ');
+                            
+                        const header = document.querySelector('.header-bar h1');
+                        if (header) header.textContent = `Welcome, ${displayName} 👋`;
+                    }
+                    
                     return true;
                 } catch (error) {
                     console.error('Auth check failed:', error);