add colors from the V1 palette and fix word breaking

frontend/src/components/shared/FitText.tsx

@@ -24,7 +24,7 @@ const FitText: React.FC<FitTextProps> = ({
   className,
   style,
   as = 'span',
-  softBreakChars = '/',
+  softBreakChars = ['-','_','/'],
 }) => {
   const ref = useRef<HTMLElement | null>(null);
 
@@ -62,6 +62,7 @@ const FitText: React.FC<FitTextProps> = ({
     // Favor shrinking over breaking words; only break at natural spaces or softBreakChars
     wordBreak: lines > 1 ? ('keep-all' as any) : ('normal' as any),
     overflowWrap: 'normal',
+    hyphens: 'manual',
     fontSize: fontSize ? `${fontSize}px` : undefined,
   };
 

frontend/src/components/shared/QuickAccessBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef } from "react";
+import React, { useState, useRef, forwardRef, useEffect } from "react";
 import { ActionIcon, Stack, Divider } from "@mantine/core";
 import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
 import SettingsIcon from "@mui/icons-material/SettingsRounded";
@@ -18,12 +18,33 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
 }, ref) => {
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
-  const { handleReaderToggle } = useToolWorkflow();
+  const { handleReaderToggle, selectedTool, leftPanelView } = useToolWorkflow();
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
   const isOverflow = useIsOverflowing(scrollableRef);
 
+  // Sync left nav highlight with selected tool when appropriate
+  useEffect(() => {
+    if (leftPanelView === 'toolContent' && selectedTool) {
+      let target: string | null = null;
+      // Map tool.view to nav button ids
+      if (selectedTool.view === 'sign') target = 'sign';
+      if (selectedTool.view === 'view') target = 'read';
+      // Use subcategory to infer Automate group
+      if (!target && selectedTool.subcategory === 'Automation') target = 'automate';
+
+      if (target && activeButton !== target) {
+        setActiveButton(target);
+        return;
+      }
+    }
+    // Revert highlight when no specific mapping applies
+    if (leftPanelView !== 'toolContent') {
+      setActiveButton('tools');
+    }
+  }, [leftPanelView, selectedTool?.view, selectedTool?.subcategory]);
+
   const handleFilesButtonClick = () => {
     openFilesModal();
   };

frontend/src/components/shared/fitText/textFit.ts

@@ -34,7 +34,11 @@ export function adjustFontSizeToFit(
   if (singleLine) {
     element.style.whiteSpace = 'nowrap';
   }
-  element.style.wordBreak = 'break-word';
+  // Never split within words; only allow natural breaks (spaces) or explicit soft breaks
+  element.style.wordBreak = 'keep-all';
+  element.style.overflowWrap = 'normal';
+  // Disable automatic hyphenation to avoid mid-word breaks; use only manual opportunities
+  element.style.setProperty('hyphens', 'manual');
   element.style.overflow = 'hidden';
 
   const minFontPx = baseFontPx * minScale;

frontend/src/components/shared/quickAccessBar/QuickAccessBar.css

@@ -126,8 +126,9 @@
   -webkit-line-clamp: 2; /* show up to two lines */
   line-clamp: 2;
   -webkit-box-orient: vertical;
-  word-break: break-word;
+  word-break: keep-all;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  hyphens: manual;
 }
 
 .button-text.active {

frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { ActionIcon, Divider } from '@mantine/core';
+import { ActionIcon, Divider, useMantineColorScheme } from '@mantine/core';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
 import FitText from '../FitText';
 import { Tooltip } from '../Tooltip';
+import { getSubcategoryColor } from '../../../data/toolRegistry';
 
 interface TopToolIndicatorProps {
   activeButton: string;
@@ -14,6 +15,7 @@ const NAV_IDS = ['read','sign','automate','files','activity','config'];
 
 const TopToolIndicator: React.FC<TopToolIndicatorProps> = ({ activeButton, setActiveButton }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
+  const { colorScheme } = useMantineColorScheme();
 
   // Determine if the indicator should be visible
   const indicatorShouldShow = Boolean(
@@ -62,13 +64,18 @@ const TopToolIndicator: React.FC<TopToolIndicatorProps> = ({ activeButton, setAc
     }
   }, [indicatorShouldShow, selectedTool, selectedToolKey]);
 
+  const lightModeBg = useMemo(() => {
+    if (!indicatorTool) return undefined;
+    return getSubcategoryColor(indicatorTool.subcategory || undefined);
+  }, [indicatorTool]);
+
   return (
     <>
-      <div className={`current-tool-slot ${indicatorVisible ? 'visible' : ''} ${replayAnim ? 'replay' : ''}`}>
+      <div style={{overflow:'visible'}} className={`current-tool-slot ${indicatorVisible ? 'visible' : ''} ${replayAnim ? 'replay' : ''}`}>
         {indicatorTool && (
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
-              <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow width={140}>
+              <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
                 <ActionIcon
                   size={'xl'}
                   variant="subtle"
@@ -80,8 +87,12 @@ const TopToolIndicator: React.FC<TopToolIndicatorProps> = ({ activeButton, setAc
                   }}
                   aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name}
                   style={{
-                    backgroundColor: isBackHover ? '#9CA3AF' : 'var(--icon-tools-bg)',
+                    backgroundColor: isBackHover
-                    color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
+                      ? '#9CA3AF'
+                      : (colorScheme === 'light' ? lightModeBg : 'var(--icon-tools-bg)'),
+                    color: isBackHover
+                      ? '#fff'
+                      : (colorScheme === 'light' ? '#fff' : 'var(--icon-tools-color)'),
                     border: 'none',
                     borderRadius: '8px',
                     cursor: 'pointer'