Resize chat due to headers on mobile

frontend/src/pages/CandidateChatPage.tsx

@@ -294,15 +294,33 @@ const CandidateChatPage = forwardRef<ConversationHandle, CandidateChatPageProps>
           flexDirection: 'column',
           flexGrow: 1,
           p: 0,
-          height: '100%',
+          maxHeight: '100%',
           position: 'relative',
         }}
       >
         {isMobile && (
-          <Tabs value={tabValue} onChange={handleTabChange} centered>
-            <Tab value="resume" icon={<DescriptionIcon />} label="Resume" />
-            <Tab value="chat" icon={<TuneIcon />} label="Chat" />
-          </Tabs>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              fontSize: '0.8rem',
+            }}
+          >
+            <Tabs value={tabValue} onChange={handleTabChange} centered>
+              <Tab
+                value="resume"
+                sx={{ maxHeight: '32px', p: 0, m: 0, fontSize: '0.75rem' }}
+                icon={<DescriptionIcon sx={{ height: '16px' }} />}
+                label="Resume"
+              />
+              <Tab
+                value="chat"
+                sx={{ maxHeight: '32px', p: 0, m: 0, fontSize: '0.75rem' }}
+                icon={<TuneIcon sx={{ height: '16px' }} />}
+                label="Chat"
+              />
+            </Tabs>
+          </Box>
         )}
         <Box
           ref={ref}
@@ -312,7 +330,9 @@ const CandidateChatPage = forwardRef<ConversationHandle, CandidateChatPageProps>
             height: '100%' /* Restrict to main-container's height */,
             width: '100%',
             minHeight: 0 /* Prevent flex overflow */,
-            maxHeight: '100%',
+            maxHeight: isMobile
+              ? 'calc(100% - 144px)'
+              : '100%' /* Adjust for header/footer on mobile */,
             '& > *:not(.Scrollable)': {
               flexShrink: 0 /* Prevent shrinking */,
             },