Fix toolbar on mobile

frontend/src/App.css

@@ -4,6 +4,11 @@ div {
   word-break: break-word;
 }
 
+button {
+  overflow-wrap: initial;
+  word-break: initial;
+}
+
 .TabPanel {
   display: flex;
   height: 100%;

frontend/src/App.tsx

@@ -344,7 +344,7 @@ const App = () => {
   const [resume, setResume] = useState<MessageData | undefined>(undefined);
   const [facts, setFacts] = useState<MessageData | undefined>(undefined);
   const timerRef = useRef<any>(null);
-  const isDesktop = useMediaQuery('(min-width:600px)');
+  const isDesktop = useMediaQuery('(min-width:650px)');
   const prevIsDesktopRef = useRef<boolean>(isDesktop);
 
   const startCountdown = (seconds: number) => {
@@ -1113,10 +1113,9 @@ const App = () => {
         }}
       >
         <Toolbar>
-          {
           <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
-              {
-                !isDesktop && 
+            {!isDesktop &&
+              <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
                 <IconButton
                   sx={{ display: "flex", margin: 'auto 0px' }}
                   size="large"
@@ -1128,9 +1127,25 @@ const App = () => {
                     <MenuIcon />
                   </Tooltip>
                 </IconButton>
+                <Tooltip title="Backstory">
+                  <Box
+                    sx={{ m: 1, gap: 1, display: "flex", flexDirection: "row", alignItems: "center", fontWeight: "bold", fontSize: "1.0rem", cursor: "pointer" }}
+                    onClick={() => { setTab(0); setMenuOpen(false); }}
+                  >
+                    <Avatar sx={{
+                      width: 24,
+                      height: 24
+                    }}
+                      variant="rounded"
+                      alt="Backstory logo"
+                      src="/logo192.png" />
+                    BACKSTORY
+                  </Box>
+                </Tooltip>
+              </Box>
             }
 
-              { menuOpen === false &&
+            {menuOpen === false && isDesktop &&
               <Tabs sx={{ display: "flex", flexGrow: 1 }}
                 value={tab}
                 indicatorColor="secondary"
@@ -1151,30 +1166,25 @@ const App = () => {
                       src="/logo192.png" />
                   }
                   iconPosition="start" />
-                  { isDesktop && 
                 <Tab
                   value={1}
                   sx={{ fontSize: '1rem' }} wrapped
                   label="Resume Builder"
                 />
-                  }
-                  {isDesktop && 
                 <Tab
                   value={2}
                   sx={{ fontSize: '1rem' }} wrapped
                   label="Context Visualizer"
                 />
-                  }
                 <Tab
                   value={3}
                   sx={{ fontSize: '1rem' }} label="About" />
                 <Tab
                   value={4}
-                    sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />}/>
+                  sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />} />
               </Tabs>
             }
           </Box>
-          }
         </Toolbar>
 
       </AppBar>

frontend/src/DocumentViewer.tsx

@@ -303,9 +303,9 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
           variant="fullWidth"
           sx={{ bgcolor: 'background.paper' }}
         >
-          <Tab label="Job Description" />
-          {(resume !== undefined || processing === "resume") && <Tab label="Resume" />}
-          {(facts !== undefined || processing === "facts") && <Tab label="Fact Check" />}
+          <Tab value={0} label="Job Description" />
+          {(resume !== undefined || processing === "resume") && <Tab value={1} label="Resume" />}
+          {(facts !== undefined || processing === "facts") && <Tab value={2} label="Fact Check" />}
         </Tabs>
 
         {/* Document display area */}