Added new styles to style sheet

microsoft · Aug 9, 2024 · ab793c4 · ab793c4
1 parent e6680ce
commit ab793c4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/frontend/src/pages/chat/Chat.module.css b/frontend/src/pages/chat/Chat.module.css
@@ -15,6 +15,22 @@
   gap: 5px;
 }
 
+.chatHorizontalStyle  {
+  width: 100%;
+  height: 100%;
+}
+
+.chatVerticalFill {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10;
+  width: 100%;
+}
+
 .chatContainer {
   flex: 1;
   display: flex;

diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -855,15 +855,8 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
           </h2>
         </Stack>
       ) : (
-        <Stack horizontal role="Stack Horizontal" style={{width: '100%', height: '100%'}}>
-        <Stack verticalFill role="Stack verticalFill" style={{display: 'flex',
-          flexGrow: 1,
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          padding: '10px',
-          width: '100%'}} >
+        <Stack horizontal role="Stack Horizontal" className={styles.chatHorizontalStyle}>
+        <Stack verticalFill role="Stack verticalFill"  className={styles.chatVerticalFill}>
             <div className={styles.chatMessageStream} style={{ marginBottom: isLoading ? '40px' : '0px' }} role="log">
             {messages.map((answer, index) => (
             <>