From 064868e96ee8a1cb659dbcf228aaea3c59c89e2e Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 19 Jul 2025 14:23:28 -0700
Subject: [PATCH] Lots of mobile and desktop edit view tweaks

---
 .../src/components/BackstoryTextField.tsx     |  10 +-
 frontend/src/components/ui/JobInfo.tsx        |  66 +-
 .../src/components/{ => ui}/ResumeChat.tsx    |  16 +-
 frontend/src/components/ui/ResumeEdit.tsx     | 713 ++++++++++--------
 frontend/src/components/ui/ResumeViewer.tsx   |   6 +-
 frontend/src/components/ui/TabWithTooltip.tsx |  44 ++
 6 files changed, 505 insertions(+), 350 deletions(-)
 rename frontend/src/components/{ => ui}/ResumeChat.tsx (97%)
 create mode 100644 frontend/src/components/ui/TabWithTooltip.tsx

diff --git a/frontend/src/components/BackstoryTextField.tsx b/frontend/src/components/BackstoryTextField.tsx
index 2841ff7..0a16a4a 100644
--- a/frontend/src/components/BackstoryTextField.tsx
+++ b/frontend/src/components/BackstoryTextField.tsx
@@ -6,8 +6,9 @@ import React, {
   useState,
   useImperativeHandle,
 } from 'react';
-import { useTheme } from '@mui/material/styles';
+import { SxProps, useTheme } from '@mui/material/styles';
 import './BackstoryTextField.css';
+import { Box } from '@mui/material';
 
 // Define ref interface for exposed methods
 interface BackstoryTextFieldRef {
@@ -23,11 +24,12 @@ interface BackstoryTextFieldProps {
   onEnter?: (value: string) => void;
   onChange?: (value: string) => void;
   style?: CSSProperties;
+  sx?: SxProps;
 }
 
 const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryTextFieldProps>(
   (props, ref) => {
-    const { value = '', disabled = false, placeholder, onEnter, onChange, style } = props;
+    const { value = '', disabled = false, placeholder, onEnter, onChange, style, sx } = props;
     const theme = useTheme();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const shadowRef = useRef<HTMLTextAreaElement>(null);
@@ -115,7 +117,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
     };
 
     return (
-      <>
+      <Box sx={{ display: 'flex', flexGrow: 1, boxSizing: 'border-box', p: 1, ...sx }}>
         <textarea
           className="BackstoryTextField"
           ref={textareaRef}
@@ -148,7 +150,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
           readOnly
           tabIndex={-1}
         />
-      </>
+      </Box>
     );
   }
 );
diff --git a/frontend/src/components/ui/JobInfo.tsx b/frontend/src/components/ui/JobInfo.tsx
index 54d9809..3ede3d6 100644
--- a/frontend/src/components/ui/JobInfo.tsx
+++ b/frontend/src/components/ui/JobInfo.tsx
@@ -5,13 +5,11 @@ import {
   Typography,
   SxProps,
   Chip,
-  Stack,
-  CardHeader,
   LinearProgress,
   IconButton,
   Tooltip,
 } from '@mui/material';
-import { Card, CardContent, Divider, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import CloseIcon from '@mui/icons-material/Close';
 import { useMediaQuery } from '@mui/material';
@@ -128,7 +126,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
     if (!items || items.length === 0) return <></>;
 
     return (
-      <Box sx={{ mb: 2 }}>
+      <Box sx={{ mb: 2, display: 'flex', position: 'relative', flexDirection: 'column' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
           {icon}
           <Typography
@@ -146,17 +144,22 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
             />
           )}
         </Box>
-        <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, position: 'relative' }}>
           {items.map((item, index) => (
-            <Chip
+            <Box
               key={index}
-              label={item}
-              variant="outlined"
-              size="small"
-              sx={{ mb: 1, fontSize: '0.75rem !important' }}
-            />
+              sx={{
+                border: '1px solid grey',
+                p: 0.5,
+                borderRadius: 1,
+                fontSize: '0.75rem !important',
+                display: 'flex',
+              }}
+            >
+              {item}
+            </Box>
           ))}
-        </Stack>
+        </Box>
       </Box>
     );
   };
@@ -165,13 +168,24 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
     if (!activeJob.requirements) return <></>;
 
     return (
-      <Card elevation={0} sx={{ m: 0, p: 0, mt: 2, background: 'transparent !important' }}>
-        <CardHeader
-          title="Job Requirements Analysis"
-          avatar={<CheckCircle color="success" />}
-          sx={{ p: 0, pb: 1 }}
-        />
-        <CardContent sx={{ p: 0 }}>
+      <Box
+        sx={{
+          maxWidth: '100%',
+          position: 'relative',
+          m: 0,
+          p: 0,
+          background: 'transparent !important',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Box
+          sx={{ p: 0, pb: 1, alignItems: 'center', display: 'flex', flexDirection: 'row', gap: 1 }}
+        >
+          <CheckCircle color="success" />
+          <Box>Job Requirements Analysis</Box>
+        </Box>
+        <Box sx={{ p: 0 }}>
           {renderRequirementSection(
             'Technical Skills (Required)',
             activeJob.requirements.technicalSkills.required,
@@ -219,8 +233,8 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
             activeJob.requirements.preferredAttributes,
             <Star color="secondary" />
           )}
-        </CardContent>
-      </Card>
+        </Box>
+      </Box>
     );
   };
 
@@ -232,9 +246,9 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
         borderColor: 'transparent',
         borderWidth: 2,
         borderStyle: 'solid',
-        transition: 'all 0.3s ease',
         flexDirection: 'column',
         minWidth: 0,
+        maxWidth: '100%',
         opacity: deleted ? 0.5 : 1.0,
         backgroundColor: deleted
           ? theme.palette.action.disabledBackground
@@ -273,6 +287,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               whiteSpace: 'nowrap',
             },
             '& > div > div > :last-of-type': { mb: 0.75, mr: 1 },
+            position: 'relative',
           }}
         >
           <Box
@@ -401,12 +416,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
           <StyledMarkdown sx={{ display: 'flex' }} content={activeJob.description} />
         )}
 
-        {variant !== 'small' && variant !== 'minimal' && (
-          <Box>
-            <Divider />
-            {renderJobRequirements()}
-          </Box>
-        )}
+        {variant !== 'small' && variant !== 'minimal' && renderJobRequirements()}
 
         {isAdmin && (
           <Box sx={{ display: 'flex', flexDirection: 'column', p: 1 }}>
diff --git a/frontend/src/components/ResumeChat.tsx b/frontend/src/components/ui/ResumeChat.tsx
similarity index 97%
rename from frontend/src/components/ResumeChat.tsx
rename to frontend/src/components/ui/ResumeChat.tsx
index c084eea..ca8bf54 100644
--- a/frontend/src/components/ResumeChat.tsx
+++ b/frontend/src/components/ui/ResumeChat.tsx
@@ -20,7 +20,7 @@ import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
 import PropagateLoader from 'react-spinners/PropagateLoader';
 import { BackstoryTextField, BackstoryTextFieldRef } from 'components/BackstoryTextField';
 import { Scrollable } from 'components/Scrollable';
-import { StyledMarkdown } from './StyledMarkdown';
+import { StyledMarkdown } from '../StyledMarkdown';
 
 const emptyMetadata: ChatMessageMetaData = {
   model: 'qwen2.5',
@@ -259,6 +259,7 @@ const ResumeChat = forwardRef<ConversationHandle, ResumeChatProps>(
 
     return (
       <Box
+        className="ResumeChat"
         ref={ref}
         sx={{
           display: 'flex',
@@ -358,7 +359,18 @@ const ResumeChat = forwardRef<ConversationHandle, ResumeChatProps>(
           </Scrollable>
         )}
         {/* Fixed Message Input */}
-        <Box sx={{ display: 'flex', flexShrink: 1, gap: 1 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexGrow: 1,
+            gap: 1,
+            position: 'relative',
+            width: '100%',
+            minWidth: '100%',
+            flexDirection: 'row',
+            overflow: 'hidden',
+          }}
+        >
           <DeleteConfirmation
             onDelete={(): void => {
               chatSession && onDelete(chatSession);
diff --git a/frontend/src/components/ui/ResumeEdit.tsx b/frontend/src/components/ui/ResumeEdit.tsx
index 7a9f015..8cb6057 100644
--- a/frontend/src/components/ui/ResumeEdit.tsx
+++ b/frontend/src/components/ui/ResumeEdit.tsx
@@ -7,19 +7,19 @@ import {
   IconButton,
   Tooltip,
   Tabs,
-  Tab,
-  Paper,
   FormControl,
   Select,
   MenuItem,
   InputLabel,
   Chip,
   Alert,
-  Stack,
   SelectChangeEvent,
+  useTheme,
+  useMediaQuery,
 } from '@mui/material';
 import PrintIcon from '@mui/icons-material/Print';
 import DifferenceIcon from '@mui/icons-material/Difference';
+import ForumIcon from '@mui/icons-material/Forum';
 import {
   Save as SaveIcon,
   ModelTraining,
@@ -42,10 +42,12 @@ import { Scrollable } from 'components/Scrollable';
 import * as Types from 'types/types';
 import { StreamingOptions } from 'services/api-client';
 import { StatusBox, StatusIcon } from './StatusIcon';
-import { ResumeChat } from 'components/ResumeChat';
+import { ResumeChat } from 'components/ui/ResumeChat';
 import { DiffViewer } from 'components/DiffViewer';
 import { ResumePreview, resumeStyles } from './ResumePreview';
 import { useAppState } from 'hooks/GlobalContext';
+import { useNavigate } from 'react-router-dom';
+import { TabWithTooltip } from './TabWithTooltip';
 
 interface ResumeRevision {
   revisionId: string;
@@ -65,13 +67,17 @@ interface ResumeEditProps {
 const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
   const { setSnack } = useAppState();
   const { onClose, resumeId, onSave } = props;
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isLarge = useMediaQuery(theme.breakpoints.up('md'));
+  const navigate = useNavigate();
   const { selectedCandidate, selectedJob } = useAppState();
   const { apiClient } = useAuth();
   const [editContent, setEditContent] = useState<string>('');
 
   const [saving, setSaving] = useState<boolean>(false);
-  const [tabValue, setTabValue] = useState('markdown');
-  const [jobTabValue, setJobTabValue] = useState('chat');
+  const [leftColumn, setLeftColumn] = useState('markdown');
+  const [rightColumn, setRightColumn] = useState('chat');
   const [status, setStatus] = useState<string>('');
   const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(null);
   const [error, setError] = useState<Types.ChatMessageError | null>(null);
@@ -79,6 +85,7 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
   const [resume, setResume] = useState<Resume | null>(null);
   const [isAIGenerated, setIsAIGenerated] = useState<boolean>(false);
   const [editPrompt, setEditPrompt] = useState<string>('');
+  const [columnView, setColumnView] = useState<'left' | 'right'>('left');
 
   // Revision-related state
   const [revisions, setRevisions] = useState<ResumeRevision[]>([]);
@@ -325,7 +332,8 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
     return generatedResume;
   };
 
-  const handleTabChange = (event: React.SyntheticEvent, newValue: string): void => {
+  const handleLeftColumnChange = (event: React.SyntheticEvent, newValue: string): void => {
+    setColumnView('left');
     if (newValue === 'print') {
       console.log('Printing resume...');
       reactToPrintFn();
@@ -333,7 +341,7 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
     }
     if (newValue === 'regenerate') {
       setSnack('Regenerating resume...');
-      setTabValue('markdown');
+      setLeftColumn('markdown');
       generateResume();
       return;
     }
@@ -341,14 +349,15 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
       setEditContent(current?.resume || '');
       setEditPrompt(current?.prompt || '');
       setIsAIGenerated(current?.aiGenerated || false);
-      setTabValue('markdown');
+      setLeftColumn('markdown');
       return;
     }
-    setTabValue(newValue);
+    setLeftColumn(newValue);
   };
 
-  const handleJobTabChange = (event: React.SyntheticEvent, newValue: string): void => {
-    setJobTabValue(newValue);
+  const handleRightColumnChange = (event: React.SyntheticEvent, newValue: string): void => {
+    setColumnView('right');
+    setRightColumn(newValue);
   };
 
   const handleClose = (): void => {
@@ -359,12 +368,10 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
     (selectedRevision !== 'current' && resume?.aiGenerated ? resume?.prompt : '') ||
     (isAIGenerated ? editPrompt : '') ||
     'Manual edits';
-  console.log(
-    `Change log: ${changeLog}, isAIGenerated: ${isAIGenerated}, editPrompt: ${editPrompt}, selectedRevision: ${selectedRevision}, resume?.aiGenerated: ${resume?.aiGenerated}`
-  );
 
   return (
     <Box
+      className="ResumeEdit"
       sx={{
         display: 'flex',
         flexGrow: 1,
@@ -375,6 +382,7 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
       }}
     >
       <Box
+        className="ResumeEditHeader"
         sx={{
           display: 'flex',
           flexDirection: 'row',
@@ -384,7 +392,14 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
         }}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: isMobile ? 'column' : 'row',
+              gap: 2,
+              flexWrap: 'wrap',
+            }}
+          >
             <Box
               sx={{
                 display: 'flex',
@@ -392,7 +407,7 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
                 gap: 0.5,
                 m: 0,
                 p: 0,
-                minWidth: '25rem',
+                minWidth: '20rem',
               }}
             >
               {resume && (
@@ -402,8 +417,21 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
                     {resume.job?.title || 'No Job Title Assigned'},{' '}
                     {resume.job?.company || 'No Company Assigned'}
                   </Typography>
-                  <Typography variant="caption" display="block" color="text.secondary">
-                    Resume ID: {resume.id}
+                  <Typography
+                    variant="caption"
+                    display="block"
+                    color="text.secondary"
+                    sx={{ display: 'flex', flexDirection: 'row' }}
+                  >
+                    Resume ID:{' '}
+                    <Box
+                      sx={{ cursor: 'pointer', textDecoration: 'underline' }}
+                      onClick={() => {
+                        navigate(`/chat/${resume.id}`);
+                      }}
+                    >
+                      {resume.id}
+                    </Box>
                   </Typography>
                 </>
               )}
@@ -413,7 +441,7 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
                 </Typography>
               )}
             </Box>
-            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, flexWrap: 'wrap' }}>
               {/* Style Selector */}
               <FormControl size="small" sx={{ minWidth: 'min-content' }}>
                 <InputLabel id="resume-style-label">Resume Style</InputLabel>
@@ -444,87 +472,86 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
                 </Select>
               </FormControl>
 
-              <Box sx={{ display: 'flex', flexDirection: 'row' }}>
-                <Stack direction="row" spacing={2} alignItems="center">
-                  <FormControl size="small" sx={{ minWidth: 200 }}>
-                    <InputLabel id="revision-select-label">
+              <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
+                <FormControl size="small" sx={{ minWidth: 200 }}>
+                  <InputLabel id="revision-select-label">
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <HistoryIcon fontSize="small" />
+                      Version History
+                    </Box>
+                  </InputLabel>
+                  <Select
+                    labelId="revision-select-label"
+                    value={selectedRevision}
+                    onChange={handleRevisionChange}
+                    label="Version History"
+                    disabled={loadingRevisions}
+                  >
+                    <MenuItem value="current">
                       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                        <HistoryIcon fontSize="small" />
-                        Version History
+                        <Chip label="CURRENT" size="small" color="primary" variant="outlined" />
+                        <Typography variant="body2">Current Version</Typography>
                       </Box>
-                    </InputLabel>
-                    <Select
-                      labelId="revision-select-label"
-                      value={selectedRevision}
-                      onChange={handleRevisionChange}
-                      label="Version History"
-                      disabled={loadingRevisions}
-                    >
-                      <MenuItem value="current">
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <Chip label="CURRENT" size="small" color="primary" variant="outlined" />
-                          <Typography variant="body2">Current Version</Typography>
+                    </MenuItem>
+                    {revisions.map(revision => (
+                      <MenuItem key={revision.revisionId} value={revision.revisionId}>
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
+                          }}
+                        >
+                          <Typography variant="body2">
+                            {formatRevisionTimestamp(revision.revisionTimestamp)}
+                          </Typography>
+                          <Typography variant="caption" color="text.secondary">
+                            Updated: {formatRevisionTimestamp(revision.updatedAt)}
+                          </Typography>
+                          <Typography
+                            variant="caption"
+                            color="text.secondary"
+                            sx={{ fontSize: '0.65rem' }}
+                          >
+                            ID: {revision.revisionId.substring(0, 8)}...
+                          </Typography>
                         </Box>
                       </MenuItem>
-                      {revisions.map(revision => (
-                        <MenuItem key={revision.revisionId} value={revision.revisionId}>
-                          <Box
-                            sx={{
-                              display: 'flex',
-                              flexDirection: 'column',
-                              alignItems: 'flex-start',
-                            }}
-                          >
-                            <Typography variant="body2">
-                              {formatRevisionTimestamp(revision.revisionTimestamp)}
-                            </Typography>
-                            <Typography variant="caption" color="text.secondary">
-                              Updated: {formatRevisionTimestamp(revision.updatedAt)}
-                            </Typography>
-                            <Typography
-                              variant="caption"
-                              color="text.secondary"
-                              sx={{ fontSize: '0.65rem' }}
-                            >
-                              ID: {revision.revisionId.substring(0, 8)}...
-                            </Typography>
-                          </Box>
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  </FormControl>
+                    ))}
+                  </Select>
+                </FormControl>
 
-                  <Tooltip title="Refresh Revisions">
-                    <IconButton
-                      size="small"
-                      onClick={loadResumeRevisions}
-                      disabled={loadingRevisions}
-                    >
-                      <RefreshIcon />
-                    </IconButton>
-                  </Tooltip>
+                <Tooltip title="Refresh Revisions">
+                  <IconButton
+                    size="small"
+                    onClick={loadResumeRevisions}
+                    disabled={loadingRevisions}
+                  >
+                    <RefreshIcon />
+                  </IconButton>
+                </Tooltip>
 
-                  {selectedRevision !== 'current' && (
-                    <>
-                      <Tooltip title="Restore this revision to editor">
-                        <Button
-                          size="small"
-                          startIcon={<RestoreFromTrashIcon />}
-                          onClick={restoreRevision}
-                          disabled={loadingRevision}
-                        >
-                          Restore
-                        </Button>
-                      </Tooltip>
-                    </>
-                  )}
-                </Stack>
+                {selectedRevision !== 'current' && (
+                  <>
+                    <Tooltip title="Restore this revision to editor">
+                      <Button
+                        size="small"
+                        startIcon={<RestoreFromTrashIcon />}
+                        onClick={restoreRevision}
+                        disabled={loadingRevision}
+                      >
+                        Restore
+                      </Button>
+                    </Tooltip>
+                  </>
+                )}
               </Box>
             </Box>
           </Box>
         </Box>
       </Box>
       <Box
+        className="ResumeEditContent"
         sx={{
           position: 'relative',
           display: 'flex',
@@ -533,6 +560,99 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
           height: '100%',
         }}
       >
+        <Box className="ResumeEditTabs" sx={{ display: 'flex', m: 0, p: 0 }}>
+          <Tabs
+            value={isLarge ? leftColumn : columnView === 'left' ? leftColumn : undefined}
+            onChange={handleLeftColumnChange}
+            sx={{
+              '& .MuiTab-root': {
+                minWidth: 'fit-content',
+                width: 'fit-content',
+                fontSize: isLarge ? '0.6rem' : '0.5rem',
+              },
+            }}
+          >
+            <TabWithTooltip
+              tooltip="Markdown Editor"
+              value="markdown"
+              icon={<EditDocumentIcon />}
+              label={isLarge ? 'Markdown' : ''}
+            />
+            <TabWithTooltip
+              tooltip="View Changes"
+              value="diff"
+              disabled={editContent === current?.resume}
+              icon={<DifferenceIcon />}
+              label={isLarge ? 'Changes' : undefined}
+            />
+            <TabWithTooltip
+              tooltip="Preview Resume"
+              value="preview"
+              icon={<PreviewIcon />}
+              label={isLarge ? 'Preview' : undefined}
+            />
+            <TabWithTooltip
+              tooltip="Print Resume"
+              disabled={leftColumn !== 'preview'}
+              value="print"
+              icon={<PrintIcon />}
+              label={isLarge ? 'Print' : undefined}
+            />
+            <TabWithTooltip
+              tooltip="Regenerate Resume"
+              value="regenerate"
+              icon={<ModelTraining />}
+              label={isLarge ? 'Regenerate' : undefined}
+            />
+            <TabWithTooltip
+              tooltip="Undo Changes"
+              value="undo"
+              disabled={editContent === resume?.resume}
+              icon={<UndoIcon />}
+              label={isLarge ? 'Revert' : undefined}
+            />
+          </Tabs>
+          <Tabs
+            value={isLarge ? rightColumn : columnView === 'right' ? rightColumn : undefined}
+            onChange={handleRightColumnChange}
+            sx={{
+              '& .MuiTab-root': {
+                minWidth: 'fit-content',
+                width: 'fit-content',
+                fontSize: isLarge ? '0.6rem' : '0.5rem',
+              },
+              borderLeft: isLarge ? '1px solid #ccc' : 'none',
+            }}
+          >
+            {resume && resume.job !== undefined && (
+              <TabWithTooltip
+                tooltip="Job"
+                value="job"
+                icon={<WorkIcon />}
+                label={isLarge ? 'Job' : ''}
+              />
+            )}
+            <TabWithTooltip
+              tooltip="AI Edit"
+              value="chat"
+              icon={<ForumIcon />}
+              label={isLarge ? 'AI Edit' : ''}
+            />
+          </Tabs>
+        </Box>
+
+        {status && (
+          <Box sx={{ mt: 1, mb: 1, width: '100%' }}>
+            <StatusBox>
+              {statusType && <StatusIcon type={statusType} />}
+              <Typography variant="body2" sx={{ ml: 1 }}>
+                {status || 'Processing...'}
+              </Typography>
+            </StatusBox>
+            {status && !error && <LinearProgress sx={{ mt: 1 }} />}
+          </Box>
+        )}
+
         <Box
           sx={{
             display: 'flex',
@@ -545,246 +665,213 @@ const ResumeEdit: React.FC<ResumeEditProps> = (props: ResumeEditProps) => {
             overflow: 'hidden',
           }}
         >
-          <Paper
-            sx={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'relative',
-              maxWidth: '100%',
-              height: '100%',
-              overflow: 'hidden',
-              alignItems: 'center',
-            }}
-          >
-            <Box sx={{ display: 'flex', m: 0, p: 0 }}>
-              <Tabs value={tabValue} onChange={handleTabChange}>
-                <Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
-                <Tab
-                  value="diff"
-                  disabled={editContent === current?.resume}
-                  icon={<DifferenceIcon />}
-                  label="Changes"
-                />
-                <Tab value="preview" icon={<PreviewIcon />} label="Preview" />
-                <Tab
-                  disabled={tabValue !== 'preview'}
-                  value="print"
-                  icon={<PrintIcon />}
-                  label="Print"
-                />
-                <Tab value="regenerate" icon={<ModelTraining />} label="Regenerate" />
-                <Tab
-                  value="undo"
-                  disabled={editContent === resume?.resume}
-                  icon={<UndoIcon />}
-                  label="Revert"
-                />
-              </Tabs>
-            </Box>
-
-            {status && (
-              <Box sx={{ mt: 1, mb: 1, width: '100%' }}>
-                <StatusBox>
-                  {statusType && <StatusIcon type={statusType} />}
-                  <Typography variant="body2" sx={{ ml: 1 }}>
-                    {status || 'Processing...'}
-                  </Typography>
-                </StatusBox>
-                {status && !error && <LinearProgress sx={{ mt: 1 }} />}
-              </Box>
-            )}
-
+          {(isLarge || columnView === 'left') && (
             <Box
               sx={{
-                display: 'flex',
-                flexGrow: 1,
-                width: '100%',
-                position: 'relative',
-                flexDirection: 'column',
-                m: 0,
-                p: 0,
-                gap: 0,
-              }}
-            >
-              {selectedRevision !== 'current' && (
-                <Alert severity="info" sx={{ width: '100%' }}>
-                  You are viewing a previous version. Click &quot;Restore&quot; to load this content
-                  into the editor.
-                </Alert>
-              )}
-
-              {isAIGenerated && (
-                <Alert severity="warning" sx={{ width: '100%' }}>
-                  This resume was generated by AI and has not been manually edited. Review and then
-                  selecte &apos;Save&apos;.
-                </Alert>
-              )}
-            </Box>
-
-            <Scrollable
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100%',
-                width: '100%',
-                minHeight: 0,
-                '& > *:not(.Scrollable)': {
-                  flexShrink: 0,
-                },
-                position: 'relative',
-              }}
-            >
-              {tabValue === 'markdown' && (
-                <>
-                  {selectedRevision === 'current' ? (
-                    <BackstoryTextField
-                      value={editContent}
-                      onChange={(value): void => setEditContent(value)}
-                      style={{
-                        position: 'relative',
-                        maxHeight: '100%',
-                        height: '100%',
-                        width: '100%',
-                        display: 'flex',
-                        minHeight: '100%',
-                        flexGrow: 1,
-                        flex: 1,
-                        overflowY: 'auto',
-                        fontFamily: 'monospace',
-                        backgroundColor: '#fafafa',
-                        fontSize: '12px',
-                      }}
-                      placeholder="Enter resume content..."
-                    />
-                  ) : (
-                    <Box
-                      sx={{
-                        p: 2,
-                        border: '1px solid',
-                        borderColor: 'divider',
-                        borderRadius: 1,
-                        backgroundColor: 'grey.50',
-                        height: '100%',
-                        overflow: 'auto',
-                      }}
-                    >
-                      {loadingRevision ? (
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <LinearProgress sx={{ flexGrow: 1 }} />
-                          <Typography variant="body2">Loading revision...</Typography>
-                        </Box>
-                      ) : (
-                        <pre style={{ border: 0 }}>{resume?.resume}</pre>
-                      )}
-                    </Box>
-                  )}
-                </>
-              )}
-              {tabValue === 'diff' && current && (
-                <DiffViewer
-                  changeLog={changeLog}
-                  original={{ content: current.resume || '', name: 'original' }}
-                  modified={{
-                    content: selectedRevision !== 'current' && resume ? resume.resume : editContent,
-                    name: 'modified',
-                  }}
-                />
-              )}
-              {tabValue === 'preview' && resume && resume.candidate && (
-                <Box
-                  className="document-container"
-                  ref={printContentRef}
-                  sx={currentStyle.contentStyle}
-                >
-                  <ResumePreview resume={resume} selectedStyle={selectedStyle} />
-                </Box>
-              )}
-            </Scrollable>
-          </Paper>
-          <Scrollable
-            sx={{
-              flex: 1,
-              display: 'flex',
-              height: '100%',
-              overflowY: 'auto',
-              position: 'relative',
-            }}
-          >
-            <Paper
-              sx={{
-                p: 1,
                 flex: 1,
                 display: 'flex',
                 flexDirection: 'column',
                 position: 'relative',
+                maxWidth: '100%',
+                height: '100%',
+                overflow: 'hidden',
+                alignItems: 'center',
               }}
             >
-              <Tabs value={jobTabValue} onChange={handleJobTabChange}>
-                {resume && resume.job !== undefined && (
-                  <Tab value="job" icon={<WorkIcon />} label="Job" />
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexGrow: 1,
+                  width: '100%',
+                  position: 'relative',
+                  flexDirection: 'column',
+                  m: 0,
+                  p: 0,
+                  gap: 0,
+                }}
+              >
+                {selectedRevision !== 'current' && (
+                  <Alert severity="info" sx={{ width: '100%' }}>
+                    You are viewing a previous version. Click &quot;Restore&quot; to load this
+                    content into the editor.
+                  </Alert>
                 )}
-                <Tab value="chat" icon={<ModelTraining />} label="AI Edit" />
-              </Tabs>
 
-              {resume && resume.job !== undefined && jobTabValue === 'job' && (
-                <JobInfo
-                  variant={'all'}
-                  job={resume.job}
+                {isAIGenerated && (
+                  <Alert severity="warning" sx={{ width: '100%' }}>
+                    This resume was generated by AI and has not been manually edited. Review and
+                    then selecte &apos;Save&apos;.
+                  </Alert>
+                )}
+              </Box>
+
+              <Scrollable
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: '100%',
+                  width: '100%',
+                  minHeight: 0,
+                  '& > *:not(.Scrollable)': {
+                    flexShrink: 0,
+                  },
+                  position: 'relative',
+                }}
+              >
+                {leftColumn === 'markdown' && (
+                  <>
+                    {selectedRevision === 'current' ? (
+                      <BackstoryTextField
+                        value={editContent}
+                        onChange={(value): void => setEditContent(value)}
+                        style={{
+                          position: 'relative',
+                          maxHeight: '100%',
+                          height: '100%',
+                          width: '100%',
+                          display: 'flex',
+                          minHeight: '100%',
+                          flexGrow: 1,
+                          flex: 1,
+                          overflowY: 'auto',
+                          fontFamily: 'monospace',
+                          backgroundColor: '#fafafa',
+                          fontSize: '12px',
+                        }}
+                        placeholder="Enter resume content..."
+                      />
+                    ) : (
+                      <Box
+                        sx={{
+                          p: 2,
+                          border: '1px solid',
+                          borderColor: 'divider',
+                          borderRadius: 1,
+                          backgroundColor: 'grey.50',
+                          height: '100%',
+                          overflow: 'auto',
+                        }}
+                      >
+                        {loadingRevision ? (
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <LinearProgress sx={{ flexGrow: 1 }} />
+                            <Typography variant="body2">Loading revision...</Typography>
+                          </Box>
+                        ) : (
+                          <pre style={{ border: 0 }}>{resume?.resume}</pre>
+                        )}
+                      </Box>
+                    )}
+                  </>
+                )}
+                {leftColumn === 'diff' && current && (
+                  <DiffViewer
+                    changeLog={changeLog}
+                    original={{ content: current.resume || '', name: 'original' }}
+                    modified={{
+                      content:
+                        selectedRevision !== 'current' && resume ? resume.resume : editContent,
+                      name: 'modified',
+                    }}
+                  />
+                )}
+                {leftColumn === 'preview' && resume && resume.candidate && (
+                  <Box
+                    className="document-container"
+                    ref={printContentRef}
+                    sx={currentStyle.contentStyle}
+                  >
+                    <ResumePreview resume={resume} selectedStyle={selectedStyle} />
+                  </Box>
+                )}
+              </Scrollable>
+              {resume && (
+                <Box
                   sx={{
-                    m: 0,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 1,
+                    alignItems: 'center',
                     p: 1,
-                    backgroundColor: '#f8f0e0',
                   }}
-                />
+                >
+                  {onClose && <Button onClick={handleClose}>Cancel</Button>}
+                  <Button
+                    onClick={() => {
+                      handleSave();
+                    }}
+                    variant="contained"
+                    disabled={saveDisabled}
+                    startIcon={<SaveIcon />}
+                  >
+                    {saving ? 'Saving...' : 'Save'}
+                  </Button>
+                  <Typography variant="caption" display="block" color="text.secondary">
+                    Last saved:{' '}
+                    {resume.updatedAt ? new Date(resume.updatedAt).toLocaleString() : 'N/A'}
+                  </Typography>
+                </Box>
               )}
-              {jobTabValue === 'chat' && resume && (
-                <ResumeChat
-                  session={resume.id || ''}
-                  resume={editContent}
-                  onResumeChange={(prompt: string, newResume: string): void => {
-                    console.log('onResumeChange:', prompt);
-                    if (newResume !== editContent) {
-                      setBackupContent(editContent);
-                      setEditPrompt(prompt);
-                      setEditContent(newResume);
-                      setIsAIGenerated(true);
-                    }
-                  }}
-                  sx={{
-                    m: 1,
-                    p: 1,
-                    flexGrow: 1,
-                    position: 'relative',
-                    maxWidth: 'fit-content',
-                    minWidth: '100%',
-                  }}
-                />
-              )}
-            </Paper>
-          </Scrollable>
+            </Box>
+          )}
+          {(isLarge || columnView === 'right') && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                position: 'relative',
+                width: '100%',
+              }}
+            >
+              <Scrollable
+                sx={{
+                  flex: 1,
+                  display: 'flex',
+                  height: '100%',
+                  width: '100%',
+                  overflowY: 'auto',
+                  position: 'relative',
+                  p: 1,
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                }}
+              >
+                {resume && rightColumn === 'job' && (
+                  <>
+                    {resume.job !== undefined ? (
+                      <JobInfo variant={'all'} job={resume.job} />
+                    ) : (
+                      <Box>No matching job found.</Box>
+                    )}
+                  </>
+                )}
+                {rightColumn === 'chat' && resume && (
+                  <ResumeChat
+                    session={resume.id || ''}
+                    resume={editContent}
+                    onResumeChange={(prompt: string, newResume: string): void => {
+                      console.log('onResumeChange:', prompt);
+                      if (newResume !== editContent) {
+                        setBackupContent(editContent);
+                        setEditPrompt(prompt);
+                        setEditContent(newResume);
+                        setIsAIGenerated(true);
+                      }
+                    }}
+                    sx={{
+                      m: 1,
+                      p: 1,
+                      flexGrow: 1,
+                      position: 'relative',
+                    }}
+                  />
+                )}
+              </Scrollable>
+            </Box>
+          )}
         </Box>
       </Box>
-      {resume && (
-        <Box
-          sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center', pl: 1, pt: 1 }}
-        >
-          {onClose && <Button onClick={handleClose}>Cancel</Button>}
-          <Button
-            onClick={() => {
-              handleSave();
-            }}
-            variant="contained"
-            disabled={saveDisabled}
-            startIcon={<SaveIcon />}
-          >
-            {saving ? 'Saving...' : 'Save'}
-          </Button>
-          <Typography variant="caption" display="block" color="text.secondary">
-            Last saved: {resume.updatedAt ? new Date(resume.updatedAt).toLocaleString() : 'N/A'}
-          </Typography>
-        </Box>
-      )}
     </Box>
   );
 };
diff --git a/frontend/src/components/ui/ResumeViewer.tsx b/frontend/src/components/ui/ResumeViewer.tsx
index 032b0b3..4031f9e 100644
--- a/frontend/src/components/ui/ResumeViewer.tsx
+++ b/frontend/src/components/ui/ResumeViewer.tsx
@@ -528,9 +528,9 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({ onSelect, candidateId, jobI
   if (mode === 'edit' && selectedResume) {
     return (
       <ResumeEdit
-        onClose={() => {
-          navigate(window.location.pathname.replace('/edit', ''));
-        }}
+        // onClose={() => {
+        //   navigate(window.location.pathname.replace('/edit', ''));
+        // }}
         resumeId={selectedResume.id}
         onSave={handleSave}
       />
diff --git a/frontend/src/components/ui/TabWithTooltip.tsx b/frontend/src/components/ui/TabWithTooltip.tsx
new file mode 100644
index 0000000..139c9c5
--- /dev/null
+++ b/frontend/src/components/ui/TabWithTooltip.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Tab, Tooltip, TabProps } from '@mui/material';
+
+interface TabWithTooltipProps extends TabProps {
+  tooltip: string;
+  showTooltip?: boolean; // Optional prop to control when tooltip shows
+}
+
+const TabWithTooltip: React.FC<TabWithTooltipProps> = ({
+  tooltip,
+  showTooltip = true,
+  disabled = false,
+  children,
+  ...tabProps
+}) => {
+  const tabElement = (
+    <Tab disabled={disabled} {...tabProps}>
+      {children}
+    </Tab>
+  );
+
+  // Don't show tooltip if showTooltip is false
+  if (!showTooltip) {
+    return tabElement;
+  }
+
+  // For disabled tabs, wrap in span since Tooltip doesn't work on disabled elements
+  if (disabled) {
+    return (
+      <Tooltip title={tooltip} placement="bottom">
+        <span style={{ display: 'inline-block' }}>{tabElement}</span>
+      </Tooltip>
+    );
+  }
+
+  // Normal case with tooltip
+  return (
+    <Tooltip title={tooltip} placement="bottom">
+      {tabElement}
+    </Tooltip>
+  );
+};
+
+export { TabWithTooltip };