fix: chat window header break in small screens (#19)

Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Nov 20, 2023 · 537ddf9 · 537ddf9
1 parent 9637ba9
commit 537ddf9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/public/chat_flyout.tsx b/public/chat_flyout.tsx
@@ -72,7 +72,7 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
         </EuiFlyoutHeader>
 
         {props.overrideComponent}
-        <EuiFlexGroup gutterSize="none" style={{ overflow: 'hidden' }}>
+        <EuiFlexGroup gutterSize="none" style={{ overflow: 'hidden' }} responsive={false}>
           <EuiFlexItem className={cs({ 'llm-chat-hidden': !chatPageVisible })}>
             <ChatPage />
           </EuiFlexItem>

diff --git a/public/tabs/chat_window_header.tsx b/public/tabs/chat_window_header.tsx
@@ -124,9 +124,14 @@ export const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = React.memo((pro
 
   return (
     <>
-      <EuiFlexGroup gutterSize="s" justifyContent="spaceAround" alignItems="center">
+      <EuiFlexGroup
+        gutterSize="s"
+        justifyContent="spaceAround"
+        alignItems="center"
+        responsive={false}
+      >
         <EuiFlexItem>
-          <EuiFlexGroup gutterSize="none" alignItems="center">
+          <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false} style={{ marginLeft: '8px' }}>
               <EuiIcon type={chatIcon} size="m" />
             </EuiFlexItem>