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,85 +684,89 @@ const App = () => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <Box
+
-        component="nav"
+      <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "column" }}>
-        aria-label="mailbox folders"
+        <Box
-      >
+          component="nav"
-        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+          aria-label="mailbox folders"
-        <Drawer
-          container={window.document.body}
-          variant="temporary"
-          open={mobileOpen}
-          onTransitionEnd={handleDrawerTransitionEnd}
-          onClose={handleDrawerClose}
-          sx={{
-            display: 'block',
-            '& .MuiDrawer-paper': { boxSizing: 'border-box' },
-          }}
-          slotProps={{
-            root: {
-              keepMounted: true, // Better open performance on mobile.
-            },
-          }}
         >
-          <Toolbar />
+          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
-          {drawer}
+          <Drawer
-        </Drawer>
+            container={window.document.body}
-      </Box>
+            variant="temporary"
+            open={mobileOpen}
+            onTransitionEnd={handleDrawerTransitionEnd}
+            onClose={handleDrawerClose}
+            sx={{
+              display: 'block',
+              '& .MuiDrawer-paper': { boxSizing: 'border-box' },
+            }}
+            slotProps={{
+              root: {
+                keepMounted: true, // Better open performance on mobile.
+              },
+            }}
+          >
+            <Toolbar />
+            {drawer}
+          </Drawer>
+        </Box>
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            overflow: 'auto'
+          }}
+          className="ChatBox">
 
-      <Box
+          <Box className="Conversation"
-        component="main"
+            sx={{ flexGrow: 2, p: 1 }}
-        sx={{ flexGrow: 1, p: 1, height: '100vh' }}
+            ref={conversationRef}>
-        className="ChatBox">
+            {conversation.map((message, index) => {
-        <Toolbar />
+              const formattedContent = message.content.trim();
 
-        <Box className="Conversation"
+              return (
-          sx={{ flexGrow: 1, p: 1 }}
+                <div key={index} className={message.role === 'user' ? 'user-message' : 'assistant-message'}>
-          ref={conversationRef}>
+                  {message.metadata ? (
-          {conversation.map((message, index) => {
+                    <>
-            const formattedContent = message.content.trim();
+                      <div className="metadata">{message.metadata.title}</div>
-
+                      {message.user && (
-            return (
-              <div key={index} className={message.role === 'user' ? 'user-message' : 'assistant-message'}>
-                {message.metadata ? (
-                  <>
-                    <div className="metadata">{message.metadata.title}</div>
-                    {message.user && (
-                      <div>{message.user}</div>
-                    )}
-                    {message.role === 'assistant' ? (
-                      <div className="markdown-content">
-                        <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]} children={formattedContent} />
-                      </div>
-                    ) : (
-                      <div>{formattedContent}</div>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    {message.user && (
                         <div>{message.user}</div>
-                    )}
+                      )}
-                    {message.role === 'assistant' ? (
+                      {message.role === 'assistant' ? (
-                      <div className="markdown-content">
+                        <div className="markdown-content">
-                        <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]} children={formattedContent} />
+                          <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]} children={formattedContent} />
-                      </div>
+                        </div>
-                    ) : (
+                      ) : (
-                          <div>{formattedContent}</div>
+                        <div>{formattedContent}</div>
-                    )}
+                      )}
-                  </>
+                    </>
-                )}
+                  ) : (
-              </div>
+                    <>
-            );
+                      {message.user && (
-          })}
+                        <div>{message.user}</div>
-          <div style={{ justifyContent: "center", display: "flex", paddingBottom: "0.5rem" }}>
+                      )}
-            <PropagateLoader
+                      {message.role === 'assistant' ? (
-              size="10px"
+                        <div className="markdown-content">
-              loading={processing}
+                          <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]} children={formattedContent} />
-              aria-label="Loading Spinner"
+                        </div>
-              data-testid="loader"
+                      ) : (
-            />
+                        <div>{formattedContent}</div>
-          </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              );
+            })}
+            <div style={{ justifyContent: "center", display: "flex", paddingBottom: "0.5rem" }}>
+              <PropagateLoader
+                size="10px"
+                loading={processing}
+                aria-label="Loading Spinner"
+                data-testid="loader"
+              />
+            </div>
+          </Box>
         </Box>
 
         <Box className="Query" sx={{ display: "flex", flexDirection: "row", p: 1 }}>
@@ -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 {