chore: fix chat scroll

Author: epetrow

client/src/pages/FinanceAnalysis.tsx

@@ -285,9 +285,10 @@ export default function FinanceAnalysis() {
         {/* Page Header */}
         {chatBot.messages.length > 1 && <ChatHeaderTemplate messages={chatBot.messages} />}
         {/* Conversation Area */}
-        <div className={`finance-analysis-chat-wrapper k-d-flex k-flex-column k-flex-1 k-p-6 k-gap-8 chat-wrapper ${chatBot.messages.length <= 1 ? 'show-gradient' : ''}`}>
+        <div className={`finance-analysis-chat-wrapper k-d-flex k-flex-column k-flex-1 k-p-6 k-gap-8 chat-wrapper ${chatBot.messages.length <= 1 ? 'show-gradient' : ''}`} style={{ minHeight: 0 }}>
           <div 
-            className={`k-d-flex k-flex-column k-align-items-center k-justify-content-flex-end k-h-full ${chatBot.messages.length > 1 ? "finance-analysis-chat-wrapper-conversation" : ""}`}
+            className={`k-d-flex k-flex-column k-align-items-center k-h-full ${chatBot.messages.length > 1 ? "finance-analysis-chat-wrapper-conversation" : ""}`}
+            style={chatBot.messages.length > 1 ? { minHeight: 0 } : { justifyContent: 'flex-end', paddingBottom: '64px' }}
           >
             {renderChat()}
           </div>
@@ -299,9 +300,9 @@ export default function FinanceAnalysis() {
         <div className="finance-preview-wrapper k-overflow-auto preview-wrapper k-d-flex k-flex-col">
           {/* Page Header */}
           <ChatHeaderTemplate messages={chatBot.messages} />
-          <div className="k-d-grid k-grid-cols-1 k-grid-cols-xl-2 preview k-flex-1">
+          <div className="k-d-grid k-grid-cols-1 k-grid-cols-xl-2 preview k-flex-1" style={{ minHeight: 0 }}>
           {/* Left Panel - Chat (393px) */}
-          <div className="k-align-self-end k-d-none k-d-xl-flex chat-preview k-pos-relative">
+          <div className="k-d-none k-d-xl-flex chat-preview k-pos-relative" style={{ minHeight: 0}}>
             {renderChat()}
           </div>
 

client/src/pages/KnowledgeAssistant.tsx

@@ -60,15 +60,15 @@ const KnowledgeAssistant = () => {
         )}
         {hasConversationStarted && <ChatHeaderTemplate messages={chatBot.messages} />}
         {/* Chat Component */}
-        <div className={`knowledge-assistant-conversation k-d-flex k-flex-column k-flex-1 k-align-items-center k-w-full conversation-container ${hasConversationStarted ? 'knowledge-assistant-conversation-started' : ''}`}>
+        <div className={`knowledge-assistant-conversation k-d-flex k-flex-column k-flex-1 k-align-items-center k-w-full conversation-container ${hasConversationStarted ? 'knowledge-assistant-conversation-started' : ''}`} style={hasConversationStarted ? { minHeight: 0 } : { justifyContent: 'flex-end', paddingBottom: '64px' }}>
           <div className={`knowledge-assistant-chat-wrapper chat-content-wrapper k-w-full k-d-flex k-flex-column k-pos-relative ${!hasConversationStarted ? 'show-gradient' : ''} ${hasConversationStarted ? 'knowledge-assistant-chat-flex-full' : 'knowledge-assistant-chat-flex-none'}`}>
             <Chat
               messages={hasConversationStarted ? chatBot.messages.slice(1) : chatBot.messages}
               authorId={chatBot.user.id}
               onSendMessage={chatBot.addNewMessage}
               placeholder="Try a suggestion or ask about KendoReact"
               className="k-border-transparent"
-              height={hasConversationStarted ? "100%" : undefined}
+              height="100%"
               messageTemplate={ChatMessage}
               timestampTemplate={() => null }
               showUsername={false}

client/src/styles/styles.css

@@ -190,7 +190,7 @@ html, body, #root {
 }
 
 .k-drawer-wrapper::after,
-.preview .charts-preview:before {
+.preview .chat-preview:before {
   content: "";
   display: block;
   height: 100%;
@@ -204,11 +204,12 @@ html, body, #root {
   border-radius: 815px;
   pointer-events: none;
 }
-.k-drawer-wrapper::after {
+.k-drawer-wrapper::after,
+.preview .chat-preview:before {
   right: 0;
 }
-.preview .charts-preview:before {
-   left: -60px;
+.preview .chat-preview:before {
+   right: -80px;
 }
 
 .user-selection-wrapper:after,
@@ -353,12 +354,11 @@ html, body, #root {
   display: none;
 }
 
-.k-chat .k-message-list {
+.k-chat .k-message-list-content {
   justify-content: flex-end;
-
+  min-height: 100%;
 }
 
-
 .finance-analysis-chat-default .k-message-list {
   padding-block: 64px;
 }
@@ -1101,13 +1101,25 @@ html, body, #root {
 
 .finance-preview-wrapper {
   height: calc(100vh - 54px);
+  overflow: hidden;
+}
+
+.finance-analysis-chat-expanded {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
 }
 
+
+
+
 .finance-charts-preview {
   border: 1px solid #FFF;
   background: rgba(255, 255, 255, 0.50);
   box-shadow: 0 4px 12px 0 rgba(13, 10, 44, 0.08);
   backdrop-filter: blur(2px);
+  overflow-y: auto;
 }
 
 .finance-charts-container {
@@ -1205,6 +1217,7 @@ html, body, #root {
 
 .knowledge-assistant-conversation {
   box-sizing: border-box;
+  min-height: 0;
 }
 
 .knowledge-assistant-conversation-started {
@@ -1218,6 +1231,8 @@ html, body, #root {
 
 .knowledge-assistant-chat-flex-full {
   flex: 1;
+  min-height: 0;
+  height: 100%;
 }
 
 .knowledge-assistant-chat-flex-none {