Word break on visualization if text too wide

Add mobile scrollable toolbar

Add onClick to make visualization context appear

frontend/src/App.tsx

@@ -1071,7 +1071,9 @@ const App = () => {
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <Tabs value={tab} indicatorColor="secondary"
               textColor="inherit"
-              variant="fullWidth"
+                variant="scrollable"
+                allowScrollButtonsMobile
+                scrollButtons="auto"
               onChange={handleTabChange} aria-label="Backstory navigation">
               <Tab label="Backstory" icon={<Avatar sx={{ width: 24, height: 24 }} variant="rounded" alt="Backstory logo" src="/logo192.png" />} iconPosition="start" />
               <Tab label="Resume Builder"/>

frontend/src/VectorVisualizer.tsx

@@ -271,8 +271,22 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, connectio
             });
           }}
 
+          onClick={(event: any) => {
+            const point = event.points[0];
+            console.log('Point:', point);
+            const type = point.customdata.type;
+            const text = point.customdata.doc;
+            const emoji = emojiMap[type] || '❓';
+            setTooltip({
+              visible: true,
+              background: point['marker.color'],
+              color: getTextColorForBackground(point['marker.color']),
+              content: `${emoji} ${type.toUpperCase()}\n${text}`,
+            });
+          }}
+
           data={[plotData.data]}
-        useResizeHandler={true}
+          useResizeHandler={true}
           config={{
             responsive: true,
             displayModeBar: false,
@@ -297,6 +311,8 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, connectio
         overflow: 'auto',
         maxHeight: '20vh',
         minHeight: '20vh',
+        overflowWrap: 'break-all',
+        wordBreak: 'break-all',
       }}
       >
         <Typography variant="body2" sx={{ p: 1, pt: 0 }}>