Size fix for mobile

src/ketr-chat/src/App.css

@@ -48,6 +48,7 @@ div {
   overflow-y: auto;
   padding: 10px;
   flex-direction: column;
+  height: 100%;
 }
 
 .user-message {

src/ketr-chat/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import { useTheme } from '@mui/material';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import Tooltip from '@mui/material/Tooltip';
@@ -646,10 +647,10 @@ const App = () => {
   };
 
   return (
-    <Box sx={{ display: 'flex', height: 1 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100dvh' }}>
       <CssBaseline />
       <AppBar
-        position="fixed"
+        position="static"
         sx={{
           zIndex: (theme) => theme.zIndex.drawer + 1,
         }}
@@ -683,6 +684,8 @@ const App = () => {
           </Typography>
         </Toolbar>
       </AppBar>
+
+      <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "column" }}>
         <Box
           component="nav"
           aria-label="mailbox folders"
@@ -708,15 +711,16 @@ const App = () => {
             {drawer}
           </Drawer>
         </Box>
-
         <Box
           component="main"
-        sx={{ flexGrow: 1, p: 1, height: '100vh' }}
+          sx={{
+            flexGrow: 1,
+            overflow: 'auto'
+          }}
           className="ChatBox">
-        <Toolbar />
 
           <Box className="Conversation"
-          sx={{ flexGrow: 1, p: 1 }}
+            sx={{ flexGrow: 2, p: 1 }}
             ref={conversationRef}>
             {conversation.map((message, index) => {
               const formattedContent = message.content.trim();
@@ -763,6 +767,7 @@ const App = () => {
               />
             </div>
           </Box>
+        </Box>
 
         <Box className="Query" sx={{ display: "flex", flexDirection: "row", p: 1 }}>
           <TextField
@@ -784,6 +789,8 @@ const App = () => {
           </AccordionActions>
         </Box>
       </Box>
+
+
       <Snackbar open={snackOpen} autoHideDuration={(snackSeverity === "success" || snackSeverity === "info") ? 1500 : 6000} onClose={handleSnackClose}>
         <Alert
           onClose={handleSnackClose}

src/ketr-chat/src/index.css

@@ -6,8 +6,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   padding: 0;
-  height: 100%;
+  height: 100dvh;
-  width: 100%;
 }
 
 code {