quick fix for height overflow issue

microsoft · Apr 28, 2023 · e6271b8 · e6271b8
1 parent 16024e7
commit e6271b8
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 55 deletions.
diff --git a/samples/apps/copilot-chat-app/webapp/src/App.tsx b/samples/apps/copilot-chat-app/webapp/src/App.tsx
@@ -1,6 +1,12 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { AuthenticatedTemplate, UnauthenticatedTemplate, useAccount, useIsAuthenticated, useMsal } from '@azure/msal-react';
+import {
+    AuthenticatedTemplate,
+    UnauthenticatedTemplate,
+    useAccount,
+    useIsAuthenticated,
+    useMsal,
+} from '@azure/msal-react';
 import { Avatar, Spinner, Subtitle1, makeStyles } from '@fluentui/react-components';
 import { Alert } from '@fluentui/react-components/unstable';
 import { Dismiss16Regular } from '@fluentui/react-icons';
@@ -18,13 +24,16 @@ const useClasses = makeStyles({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'stretch',
-        justifyContent: 'space-between',
+        width: '100%',
+        height: '100vh',
+    },
+    content: {
+        Flex: 'auto',
     },
     header: {
         backgroundColor: '#9c2153',
         width: '100%',
-        height: '48px',
+        height: '5.5%',
         color: '#FFF',
         display: 'flex',
         '& h1': {
@@ -50,15 +59,15 @@ const App: FC = () => {
     const classes = useClasses();
     const { alerts } = useAppSelector((state: RootState) => state.app);
     const dispatch = useAppDispatch();
-        
+
     const { instance, accounts, inProgress } = useMsal();
-    const account = useAccount(accounts[0] || {});    
+    const account = useAccount(accounts[0] || {});
     const isAuthenticated = useIsAuthenticated();
 
     const chat = useChat();
 
     useEffect(() => {
-        if (isAuthenticated && account && appState === AppState.LoadingChats) {            
+        if (isAuthenticated && account && appState === AppState.LoadingChats) {
             // Load all chats from memory
             async function loadChats() {
                 if (await chat.loadChats()) {
@@ -79,15 +88,15 @@ const App: FC = () => {
     return (
         <div>
             <UnauthenticatedTemplate>
-                <div style={{ display: 'flex', width: '100%', flexDirection: 'column', height: '100vh' }}>
+                <div className={classes.container}>
                     <div className={classes.header}>
-                        <Subtitle1 as="h1">Copilot Chat</Subtitle1>                        
+                        <Subtitle1 as="h1">Copilot Chat</Subtitle1>
                     </div>
                     <Login />
                 </div>
             </UnauthenticatedTemplate>
             <AuthenticatedTemplate>
-                <div style={{ display: 'flex', width: '100%', flexDirection: 'column', height: '100vh' }}>
+                <div className={classes.container}>
                     <div className={classes.header}>
                         <Subtitle1 as="h1">Copilot Chat</Subtitle1>
                         <Avatar
@@ -98,35 +107,37 @@ const App: FC = () => {
                             badge={{ status: 'available' }}
                         />
                     </div>
-                    {alerts &&
-                        Object.keys(alerts).map((key) => {
-                            const alert = alerts[key];
-                            return (
-                                <Alert
-                                    intent={alert.type}
-                                    action={{
-                                        icon: (
-                                            <Dismiss16Regular
-                                                aria-label="dismiss message"
-                                                onClick={() => onDismissAlert(key)}
-                                                color="black"
-                                            />
-                                        ),
-                                    }}
-                                    key={key}
-                                >
-                                    {alert.message}
-                                </Alert>
-                            );
-                        })}
-                    {appState === AppState.ProbeForBackend && (
-                        <BackendProbe
-                            uri={process.env.REACT_APP_BACKEND_URI as string}
-                            onBackendFound={() => setAppState(AppState.LoadingChats)}
-                        />
-                    )}
-                    {appState === AppState.LoadingChats && <Spinner labelPosition="below" label="Loading Chats" />}
-                    {appState === AppState.Chat && <ChatView />}
+                    <div className={classes.content}>
+                        {alerts &&
+                            Object.keys(alerts).map((key) => {
+                                const alert = alerts[key];
+                                return (
+                                    <Alert
+                                        intent={alert.type}
+                                        action={{
+                                            icon: (
+                                                <Dismiss16Regular
+                                                    aria-label="dismiss message"
+                                                    onClick={() => onDismissAlert(key)}
+                                                    color="black"
+                                                />
+                                            ),
+                                        }}
+                                        key={key}
+                                    >
+                                        {alert.message}
+                                    </Alert>
+                                );
+                            })}
+                        {appState === AppState.ProbeForBackend && (
+                            <BackendProbe
+                                uri={process.env.REACT_APP_BACKEND_URI as string}
+                                onBackendFound={() => setAppState(AppState.LoadingChats)}
+                            />
+                        )}
+                        {appState === AppState.LoadingChats && <Spinner labelPosition="below" label="Loading Chats" />}
+                        {appState === AppState.Chat && <ChatView />}
+                    </div>
                 </div>
             </AuthenticatedTemplate>
         </div>

diff --git a/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx b/samples/apps/copilot-chat-app/webapp/src/components/chat/ChatRoom.tsx
@@ -17,8 +17,10 @@ const log = debug(Constants.debug.root).extend('chat-room');
 
 const useClasses = makeStyles({
     root: {
-        height: '100%',
-        display: 'grid',
+        height: '94.5%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
         gridTemplateColumns: '1fr',
         gridTemplateRows: '1fr auto',
         gridTemplateAreas: "'history' 'input'",

diff --git a/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx b/samples/apps/copilot-chat-app/webapp/src/components/views/ChatView.tsx
@@ -11,7 +11,8 @@ const useClasses = makeStyles({
         justifyContent: 'space-between',
         width: '100%',
         height: '100%',
-        Flex: '1',
+        maxHeight: '100%',
+        position: 'fixed',
     },
 });
 
@@ -24,4 +25,4 @@ export const ChatView: FC = () => {
             <ChatWindow />
         </div>
     );
-};
+};
diff --git a/samples/apps/copilot-chat-app/webapp/src/components/views/Login.tsx b/samples/apps/copilot-chat-app/webapp/src/components/views/Login.tsx
@@ -1,30 +1,24 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { useMsal } from '@azure/msal-react';
-import { Body1, Button, Image, Title3, } from '@fluentui/react-components';
+import { Body1, Button, Image, Title3 } from '@fluentui/react-components';
 import React from 'react';
 import signInLogo from '../../ms-symbollockup_signin_light.svg';
 
 export const Login: React.FC = () => {
     const { instance } = useMsal();
 
-
-
-     return (
+    return (
         <div style={{ padding: 40, gap: 10, display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-            <Title3>Login with your Microsoft Account</Title3>            
+            <Title3>Login with your Microsoft Account</Title3>
             <Body1>
                 Don't have an account? Create one for free at{' '}
                 <a href="https://account.microsoft.com/" target="_blank" rel="noreferrer">
                     https://account.microsoft.com/
                 </a>
             </Body1>
 
-            <Button
-                style={{ padding: 0 }}
-                appearance="transparent"
-                onClick={() => instance.loginRedirect()}
-            >
+            <Button style={{ padding: 0 }} appearance="transparent" onClick={() => instance.loginRedirect()}>
                 <Image src={signInLogo} />
             </Button>
         </div>

diff --git a/samples/apps/copilot-chat-app/webapp/src/index.tsx b/samples/apps/copilot-chat-app/webapp/src/index.tsx
@@ -11,7 +11,6 @@ import { store } from './redux/app/store';
 
 import React from 'react';
 
-
 if (!localStorage.getItem('debug')) {
     localStorage.setItem('debug', `${Constants.debug.root}:*`);
 }
@@ -35,7 +34,6 @@ document.addEventListener('DOMContentLoaded', () => {
                         </FluentProvider>
                     </MsalProvider>
                 </ReduxProvider>
-                ,
             </React.StrictMode>,
         );
     }