fix scrolling and dynamic tiling issues

phd-advisor-frontend/src/pages/ChatPage.js

@@ -560,6 +560,12 @@ const handleNewChat = async (sessionId = null) => {
     setReplyingTo(null);
   };
 
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
+  const handleSidebarToggle = (isCollapsed) => {
+    setIsSidebarCollapsed(isCollapsed);
+  };
+
   const hasMessages = messages.length > 0;
   const hasConversationMessages = messages.filter(m => m.type !== 'system' && m.type !== 'document_upload').length > 0;
 
@@ -573,9 +579,10 @@ const handleNewChat = async (sessionId = null) => {
         onNewChat={handleNewChat}
         onSignOut={onSignOut}
         authToken={authToken}
+        onSidebarToggle={handleSidebarToggle}
       />
       
-      <div className="main-chat-area">
+      <div className={`main-chat-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         <div className="modern-chat-page">
           {/* Floating Header */}
           <div className="floating-header">
@@ -661,7 +668,9 @@ const handleNewChat = async (sessionId = null) => {
           {/* Main Content */}
           <div className="chat-content">
             {!hasMessages ? (
-              <SuggestionsPanel onSuggestionClick={handleSendMessage} />
+              <div className="welcome-state">
+                <SuggestionsPanel onSuggestionClick={handleSendMessage} />
+              </div>
             ) : (
               <div className="messages-container">
                 {/* Add loading session indicator */}

phd-advisor-frontend/src/styles/ChatPage.css

@@ -1,12 +1,9 @@
-
 /* Modern Chat Page Layout */
 .modern-chat-page {
-  height: 100%; 
-  background: var(--bg-gradient);
+  height: 100vh;
   display: flex;
   flex-direction: column;
-  position: relative;
-  overflow: hidden; /* Prevent body overflow */
+  overflow: hidden;
 }
 
 [data-theme="dark"] .modern-chat-page {
@@ -159,11 +156,12 @@
   display: flex;
   flex-direction: column;
   padding-top: 24px;
-  padding-bottom: 140px; /* Space for floating input */
+  padding-bottom: 140px; 
   padding-left: 16px;
   padding-right: 16px;
-  overflow: hidden; /* Critical for proper scrolling */
-  min-height: 0; /* Allow flex child to shrink */
+  overflow: visible; 
+  min-height: 0; 
+  height: 100vh; 
 }
 
 .export-dropdown {
@@ -174,14 +172,20 @@
 .welcome-state {
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-top: 40px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
 }
 
 .suggestions-container {
   width: 100%;
   max-width: 1200px;
+  margin: 0 auto;
+  flex-shrink: 0;
 }
 
 /* Chat State */
@@ -191,6 +195,17 @@
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
+  height: 100%; 
+}
+
+.chat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  /* Add bottom padding to prevent content being hidden behind floating input */
+  padding-bottom: 140px;
 }
 
 .messages-area {
@@ -200,14 +215,15 @@
 }
 
 .messages-scroll {
-  height: 100%; /* Use full height of parent */
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 20px;
   padding-bottom: 40px;
-  /* Ensure smooth scrolling with proper background */
   background: var(--bg-gradient);
   scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
 }
 
 .messages-container {
@@ -215,16 +231,19 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 0; /* Critical for flex layout */
-  background: var(--bg-gradient); /* Ensure dark mode background */
+  min-height: 0;
+  height: 100%;
+  background: var(--bg-gradient);
 }
 
 .messages-list {
   flex: 1;
   overflow: hidden;
-  min-height: 0; /* Allow proper shrinking */
+  min-height: 0;
+  height: 100%;
 }
 
+
 [data-theme="dark"] .messages-scroll,
 [data-theme="dark"] .messages-container,
 [data-theme="dark"] .main-content {
@@ -521,6 +540,7 @@
   color: var(--text-secondary);
 }
 
+/* MAIN LAYOUT WITH SIDEBAR - FIXED */
 .chat-page-with-sidebar {
   display: flex;
   height: 100vh;
@@ -530,7 +550,7 @@
 
 .main-chat-area {
   flex: 1;
-  margin-left: 300px; /* Width of sidebar */
+  margin-left: 300px; /* Width of sidebar when expanded */
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -538,6 +558,11 @@
   overflow: hidden;
 }
 
+/* FIXED: Chat area expansion when sidebar is collapsed */
+.main-chat-area.sidebar-collapsed {
+  margin-left: 70px; /* Width of sidebar when collapsed */
+}
+
 /* Session title display in header */
 .session-title-display {
   display: flex;
@@ -904,4 +929,8 @@
   .main-chat-area {
     margin-left: 0;
   }
+
+  .main-chat-area.sidebar-collapsed {
+    margin-left: 0;
+  }
 }