layout improvements on different screen sizes

Author: Veikkosuhonen

src/client/components/ChatV2/ChatBox.tsx

@@ -274,7 +274,7 @@ export const ChatBox = ({
 
           <Typography
             sx={{
-              display: { xs: 'none', lg: 'block' },
+              display: { sm: 'none', md: 'block' },
               ml: 'auto',
               opacity: acuallyDisabled ? 0 : 1,
               transition: 'opacity 0.2s ease-in-out',
@@ -296,7 +296,7 @@ export const ChatBox = ({
                 </Typography>
               }
             >
-              <OutlineButtonBlack sx={{ display: { xs: 'block', lg: 'none' } }} onClick={() => setChatLeftSidePanelOpen(true)} id="left-panel-open">
+              <OutlineButtonBlack sx={{ display: { sm: 'block', md: 'none' } }} onClick={() => setChatLeftSidePanelOpen(true)} id="left-panel-open">
                 <SettingsIcon sx={{ color: 'rgba(0, 0, 0, 0.7)' }} />
               </OutlineButtonBlack>
             </Tooltip>

src/client/components/ChatV2/ChatV2.tsx

@@ -378,7 +378,7 @@ export const ChatV2 = () => {
         ) : (
           <>
             <LeftMenu
-              sx={{ display: { xs: 'none', lg: 'flex' }, position: 'fixed', top: 0 }}
+              sx={{ display: { sm: 'none', md: 'flex' }, position: 'fixed', top: 0 }}
               course={course}
               handleReset={handleReset}
               user={user}
@@ -391,7 +391,7 @@ export const ChatV2 = () => {
               ragIndices={ragIndices}
               messages={messages}
             />
-            <Box width={400} /> {/* Holds space for left menu */}
+            <Box sx={{ width: { md: 300, lg: 400 } }} /> {/* Holds space for left menu */}
           </>
         ))}
 
@@ -557,16 +557,14 @@ export const ChatV2 = () => {
       {!isMobile && showAnnotations && activeFileSearchResult && (
         <Box
           sx={{
-            maxWidth: { xs: 300, md: 400 },
+            width: { md: 300, lg: 400 },
             height: '100vh',
             display: 'flex',
             flexDirection: 'column',
             flex: 1,
             position: 'sticky',
             top: 0,
             borderLeft: '1px solid rgba(0,0,0,0.12)',
-            width: 400,
-            minWidth: 400,
             paddingTop: !isEmbeddedMode ? '4rem' : 0,
           }}
         >
@@ -609,8 +607,7 @@ const LeftMenu = ({
       sx={[
         {
           flex: 1,
-          minWidth: 300,
-          maxWidth: { xs: 300, md: 400 },
+          width: { md: 300, lg: 400 },
           position: 'relative',
           height: '100vh',
           borderRight: '1px solid rgba(0, 0, 0, 0.12)',