Merge pull request #640 from microsoft/joshuakr/7365-Fix-Inoperable-S…

…crollbar

Joshuakr/7365 fix inoperable scrollbar

app/frontend/src/pages/chat/Chat.module.css

@@ -26,6 +26,12 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
+
+
+}
+
+body {
+    overflow: hidden;
 }
 
 .chatEmptyState {
@@ -99,14 +105,15 @@
 
 .chatMessageStream {
     flex-grow: 1;
-    max-height: 1024px;
     max-width: 1028px;
     width: 100%;
     overflow-y: auto;
     padding-left: 24px;
     padding-right: 24px;
     display: flex;
     flex-direction: column;
+    overflow-y: auto; /* or 'scroll' if you always want the scrollbar to be visible */
+    max-height: calc(100vh - 313px); /* optional, adjust according to your layout */
 }
 
 .chatMessageGpt {
@@ -187,12 +194,21 @@
 .chatInputWarningMessage{
     font-size: 12px;
     font-weight: 400;
-    color: rgb(133, 133, 133);
+    color: #858585;
     line-height: 22px;
     padding-top: 6px;
     padding-bottom: 6px;
     white-space: pre-line;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    position: absolute;
+    bottom: 23px;
+    right: 40px;
+}
+
+@media (max-width: 800px) {
+    .chatInputWarningMessage {
+        bottom: 8px;
+    }
 }