From 42031ea3604a3eb70869e02b2db7734017980404 Mon Sep 17 00:00:00 2001
From: danieleckoski <daniel.eckoski@bit.admin.ch>
Date: Mon, 20 Apr 2026 22:55:11 +0200
Subject: [PATCH 1/2] side navigation bar and responsive  design

---
 frontend/src/App.jsx                          | 313 +++++++++++++++---
 frontend/src/features/agent/AgentChat.jsx     |  41 +++
 .../features/csvtickets/CSVTicketTable.jsx    |  59 +++-
 .../src/features/settings/SettingsPage.jsx    |  18 +-
 .../src/features/workbench/RunsSidePanel.jsx  |  10 +
 .../src/features/workbench/WorkbenchPage.jsx  |  50 ++-
 .../src/features/workflow/WorkflowPage.jsx    |  79 +++--
 7 files changed, 477 insertions(+), 93 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a159a6a..f280c1b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -8,15 +8,17 @@
  */
 
 import {
+  Button,
     makeStyles,
+  Subtitle2,
     Subtitle1,
-    Tab,
-    TabList,
     Text,
     tokens,
 } from '@fluentui/react-components'
 import {
     Bot24Regular,
+  ChevronLeft24Regular,
+  ChevronRight24Regular,
     DataHistogram24Regular,
     DocumentEdit24Regular,
     Flow24Regular,
@@ -43,31 +45,174 @@ import SettingsPage from './features/settings/SettingsPage'
 import useTabPreferences from './features/settings/useTabPreferences'
 import { listWorkbenchAgents } from './services/api'
 
+const NAV_COLLAPSED_STORAGE_KEY = 'app-nav-collapsed'
+
 const useStyles = makeStyles({
   app: {
     minHeight: '100vh',
     backgroundColor: tokens.colorNeutralBackground3,
+    overflowX: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
   },
   header: {
     backgroundColor: tokens.colorBrandBackground,
     color: tokens.colorNeutralForegroundOnBrand,
     padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
     boxShadow: tokens.shadow4,
+    '@media (max-width: 768px)': {
+      padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalL}`,
+    },
+    '@media (max-width: 480px)': {
+      padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    },
+  },
+  headerInner: {
+    maxWidth: '1400px',
+    margin: '0 auto',
   },
   title: {
     color: tokens.colorNeutralForegroundOnBrand,
+    overflowWrap: 'anywhere',
   },
   subtitle: {
     color: tokens.colorNeutralForegroundOnBrand,
     opacity: 0.9,
     marginTop: tokens.spacingVerticalXS,
+    overflowWrap: 'anywhere',
   },
-  nav: {
+  shell: {
+    display: 'flex',
+    flex: 1,
+    minHeight: 0,
+  },
+  sidebar: {
+    width: '280px',
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
     backgroundColor: tokens.colorNeutralBackground1,
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    transitionDuration: tokens.durationNormal,
+    transitionProperty: 'width',
+    transitionTimingFunction: tokens.curveEasyEase,
+    minHeight: 0,
+    '@media (max-width: 768px)': {
+      width: '232px',
+    },
+  },
+  sidebarCollapsed: {
+    width: '88px',
+    '@media (max-width: 768px)': {
+      width: '72px',
+    },
+  },
+  sidebarHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalS,
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalM}`,
     borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
-    padding: `0 ${tokens.spacingHorizontalXL}`,
+  },
+  sidebarTitle: {
+    minWidth: 0,
+    overflow: 'hidden',
+  },
+  collapseButton: {
+    minWidth: '36px',
+    width: '36px',
+    height: '36px',
+    padding: 0,
+    flexShrink: 0,
+  },
+  navList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXS,
+    padding: tokens.spacingHorizontalS,
+    overflowY: 'auto',
+    flex: 1,
+    minHeight: 0,
+  },
+  navButton: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalM,
+    border: 'none',
+    borderRadius: tokens.borderRadiusLarge,
+    backgroundColor: 'transparent',
+    color: tokens.colorNeutralForeground2,
+    cursor: 'pointer',
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    textAlign: 'left',
+    transitionDuration: tokens.durationNormal,
+    transitionProperty: 'background-color, color',
+    transitionTimingFunction: tokens.curveEasyEase,
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1,
+    },
+  },
+  navButtonCollapsed: {
+    justifyContent: 'center',
+    padding: `${tokens.spacingVerticalS} 0`,
+  },
+  navButtonActive: {
+    backgroundColor: tokens.colorBrandBackground2,
+    color: tokens.colorBrandForeground1,
+    boxShadow: `inset 3px 0 0 ${tokens.colorBrandStroke1}`,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackground2Hover,
+      color: tokens.colorBrandForeground1,
+    },
+  },
+  navIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  navLabelWrap: {
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+  },
+  navLabel: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  navPath: {
+    color: tokens.colorNeutralForeground4,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  contentArea: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
   },
   content: {
+    width: '100%',
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
+    '@media (max-width: 768px)': {
+      padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalL}`,
+    },
+    '@media (max-width: 480px)': {
+      padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    },
+  },
+  contentInner: {
+    width: '100%',
     maxWidth: '1400px',
     margin: '0 auto',
   },
@@ -77,8 +222,24 @@ export default function App() {
   const styles = useStyles()
   const location = useLocation()
   const navigate = useNavigate()
+  const [isNavCollapsed, setIsNavCollapsed] = useState(false)
 
   const [menuAgents, setMenuAgents] = useState([])
+  useEffect(() => {
+    const storedValue = window.localStorage.getItem(NAV_COLLAPSED_STORAGE_KEY)
+    if (storedValue !== null) {
+      setIsNavCollapsed(storedValue === 'true')
+      return
+    }
+    if (window.innerWidth <= 1024) {
+      setIsNavCollapsed(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.localStorage.setItem(NAV_COLLAPSED_STORAGE_KEY, String(isNavCollapsed))
+  }, [isNavCollapsed])
+
   useEffect(() => {
     listWorkbenchAgents()
       .then((data) => {
@@ -136,63 +297,105 @@ export default function App() {
     ?? allTabs.find((tab) => location.pathname.startsWith(tab.path))?.value
     ?? 'csvtickets'
 
+  const mainNavTabs = navTabs.filter((tab) => tab.value !== 'settings')
+
+  const renderNavButton = (tab) => {
+    const isActive = activeTab === tab.value
+    return (
+      <button
+        key={tab.value}
+        type="button"
+        className={`${styles.navButton} ${isNavCollapsed ? styles.navButtonCollapsed : ''} ${isActive ? styles.navButtonActive : ''}`}
+        onClick={() => navigate(tab.path)}
+        data-testid={tab.testId}
+        aria-label={tab.label}
+        title={isNavCollapsed ? tab.label : undefined}
+      >
+        <span className={styles.navIcon}>{tab.icon}</span>
+        {!isNavCollapsed && (
+          <span className={styles.navLabelWrap}>
+            <Text className={styles.navLabel} weight={isActive ? 'semibold' : 'regular'}>
+              {tab.label}
+            </Text>
+            <Text className={styles.navPath} size={200}>
+              {tab.path}
+            </Text>
+          </span>
+        )}
+      </button>
+    )
+  }
+
   return (
     <div className={styles.app}>
       <header className={styles.header}>
-        <Subtitle1 className={styles.title}>CSV Ticket Viewer</Subtitle1>
-        <Text className={styles.subtitle} size={300}>
-          View and filter ticket data from CSV exports
-        </Text>
+        <div className={styles.headerInner}>
+          <Subtitle1 className={styles.title}>CSV Ticket Viewer</Subtitle1>
+          <Text className={styles.subtitle} size={300}>
+            View and filter ticket data from CSV exports
+          </Text>
+        </div>
       </header>
 
-      <nav className={styles.nav}>
-        <TabList
-          selectedValue={activeTab}
-          onTabSelect={(_, data) => {
-            const selected = navTabs.find((tab) => tab.value === data.value)
-            if (selected) {
-              navigate(selected.path)
-            }
-          }}
-          size="large"
-        >
-          {navTabs.map((tab) => (
-            <Tab key={tab.value} value={tab.value} icon={tab.icon} data-testid={tab.testId}>
-              {tab.label}
-            </Tab>
-          ))}
-        </TabList>
-      </nav>
-
-      <main className={styles.content}>
-        <Routes>
-          <Route path="/" element={<Navigate to="/csvtickets" replace />} />
-          <Route path="/kba-drafter" element={<KBADrafterPage />} />
-          <Route path="/csvtickets" element={<CSVTicketTable />} />
-          {USECASE_DEMO_DEFINITIONS.map((definition) => (
-            <Route
-              key={definition.id}
-              path={definition.route}
-              element={<UsecaseDemoPage definition={definition} />}
-            />
-          ))}
-          <Route path="/kitchensink" element={<KitchenSink />} />
-          <Route path="/fields" element={<FieldsDocs />} />
-          <Route path="/workbench" element={<WorkbenchPage />} />
-          {menuAgents.map((agent) => (
-            <Route
-              key={agent.id}
-              path={`/agent-run/${agent.id}`}
-              element={<AgentRunPage agent={agent} />}
+      <div className={styles.shell}>
+        <aside className={`${styles.sidebar} ${isNavCollapsed ? styles.sidebarCollapsed : ''}`}>
+          <div className={styles.sidebarHeader}>
+            {!isNavCollapsed && (
+              <div className={styles.sidebarTitle}>
+                <Subtitle2>Navigation</Subtitle2>
+                <Text size={200}>Main sections</Text>
+              </div>
+            )}
+            <Button
+              className={styles.collapseButton}
+              appearance="subtle"
+              icon={isNavCollapsed ? <ChevronRight24Regular /> : <ChevronLeft24Regular />}
+              onClick={() => setIsNavCollapsed((current) => !current)}
+              aria-label={isNavCollapsed ? 'Expand navigation' : 'Collapse navigation'}
+              title={isNavCollapsed ? 'Expand navigation' : 'Collapse navigation'}
             />
-          ))}
-          <Route path="/agent" element={<AgentChat />} />
-          <Route path="/activity" element={<ActivityPage />} />
-          <Route path="/workflow" element={<WorkflowPage />} />
-          <Route path="/settings" element={<SettingsPage tabPrefs={tabPrefs} />} />
-          <Route path="*" element={<Navigate to="/csvtickets" replace />} />
-        </Routes>
-      </main>
+          </div>
+
+          <nav className={styles.navList} aria-label="Main navigation">
+            {mainNavTabs.map(renderNavButton)}
+            {renderNavButton(settingsTab)}
+          </nav>
+        </aside>
+
+        <div className={styles.contentArea}>
+          <main className={styles.content}>
+            <div className={styles.contentInner}>
+              <Routes>
+                <Route path="/" element={<Navigate to="/csvtickets" replace />} />
+                <Route path="/kba-drafter" element={<KBADrafterPage />} />
+                <Route path="/csvtickets" element={<CSVTicketTable />} />
+                {USECASE_DEMO_DEFINITIONS.map((definition) => (
+                  <Route
+                    key={definition.id}
+                    path={definition.route}
+                    element={<UsecaseDemoPage definition={definition} />}
+                  />
+                ))}
+                <Route path="/kitchensink" element={<KitchenSink />} />
+                <Route path="/fields" element={<FieldsDocs />} />
+                <Route path="/workbench" element={<WorkbenchPage />} />
+                {menuAgents.map((agent) => (
+                  <Route
+                    key={agent.id}
+                    path={`/agent-run/${agent.id}`}
+                    element={<AgentRunPage agent={agent} />}
+                  />
+                ))}
+                <Route path="/agent" element={<AgentChat />} />
+                <Route path="/activity" element={<ActivityPage />} />
+                <Route path="/workflow" element={<WorkflowPage />} />
+                <Route path="/settings" element={<SettingsPage tabPrefs={tabPrefs} />} />
+                <Route path="*" element={<Navigate to="/csvtickets" replace />} />
+              </Routes>
+            </div>
+          </main>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/frontend/src/features/agent/AgentChat.jsx b/frontend/src/features/agent/AgentChat.jsx
index b17fdb4..ab6158f 100644
--- a/frontend/src/features/agent/AgentChat.jsx
+++ b/frontend/src/features/agent/AgentChat.jsx
@@ -41,6 +41,12 @@ const useStyles = makeStyles({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    '@media (max-width: 768px)': {
+      padding: tokens.spacingVerticalM,
+    },
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalS,
+    },
   },
   card: {
     maxWidth: '1200px',
@@ -49,17 +55,27 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     height: 'calc(100vh - 200px)',
+    minHeight: '480px',
+    '@media (max-width: 768px)': {
+      height: 'calc(100vh - 160px)',
+    },
+    '@media (max-width: 480px)': {
+      height: 'calc(100vh - 120px)',
+      minHeight: '420px',
+    },
   },
   header: {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     gap: tokens.spacingHorizontalM,
+    flexWrap: 'wrap',
   },
   headerControls: {
     display: 'flex',
     gap: tokens.spacingHorizontalS,
     alignItems: 'center',
+    flexWrap: 'wrap',
   },
   messagesContainer: {
     flex: 1,
@@ -69,12 +85,19 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     gap: tokens.spacingVerticalM,
     backgroundColor: tokens.colorNeutralBackground1,
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalM,
+    },
   },
   message: {
     display: 'flex',
     gap: tokens.spacingHorizontalM,
     alignItems: 'flex-start',
     maxWidth: '85%',
+    '@media (max-width: 640px)': {
+      maxWidth: '100%',
+      gap: tokens.spacingHorizontalS,
+    },
   },
   userMessage: {
     alignSelf: 'flex-end',
@@ -91,6 +114,10 @@ const useStyles = makeStyles({
     height: '40px',
     borderRadius: tokens.borderRadiusCircular,
     flexShrink: 0,
+    '@media (max-width: 480px)': {
+      width: '32px',
+      height: '32px',
+    },
   },
   userIcon: {
     backgroundColor: tokens.colorBrandBackground,
@@ -165,14 +192,27 @@ const useStyles = makeStyles({
     display: 'flex',
     gap: tokens.spacingHorizontalM,
     backgroundColor: tokens.colorNeutralBackground1,
+    '@media (max-width: 640px)': {
+      flexDirection: 'column',
+      padding: tokens.spacingVerticalM,
+      gap: tokens.spacingVerticalS,
+    },
   },
   inputField: {
     flex: 1,
   },
+  sendButton: {
+    '@media (max-width: 640px)': {
+      width: '100%',
+    },
+  },
   emptyState: {
     textAlign: 'center',
     padding: tokens.spacingVerticalXXXL,
     color: tokens.colorNeutralForeground3,
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalXL,
+    },
   },
   errorCard: {
     backgroundColor: tokens.colorPaletteRedBackground1,
@@ -386,6 +426,7 @@ export default function AgentChat() {
             />
           </Field>
           <Button
+            className={styles.sendButton}
             appearance="primary"
             icon={<Send24Regular />}
             onClick={handleSendMessage}
diff --git a/frontend/src/features/csvtickets/CSVTicketTable.jsx b/frontend/src/features/csvtickets/CSVTicketTable.jsx
index fa3c25c..45f0e35 100644
--- a/frontend/src/features/csvtickets/CSVTicketTable.jsx
+++ b/frontend/src/features/csvtickets/CSVTicketTable.jsx
@@ -46,6 +46,12 @@ import { getCSVTicket, getCSVTicketFields, getCSVTickets, getCSVTicketStats } fr
 const useStyles = makeStyles({
   container: {
     padding: tokens.spacingVerticalL,
+    '@media (max-width: 768px)': {
+      padding: tokens.spacingVerticalM,
+    },
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalS,
+    },
   },
   header: {
     display: 'flex',
@@ -63,6 +69,10 @@ const useStyles = makeStyles({
   },
   statCard: {
     minWidth: '120px',
+    flex: '1 1 180px',
+    '@media (max-width: 480px)': {
+      flexBasis: '100%',
+    },
   },
   filters: {
     display: 'flex',
@@ -70,15 +80,38 @@ const useStyles = makeStyles({
     alignItems: 'center',
     flexWrap: 'wrap',
     marginBottom: tokens.spacingVerticalM,
+    '@media (max-width: 640px)': {
+      alignItems: 'stretch',
+      gap: tokens.spacingVerticalS,
+    },
+  },
+  filterControl: {
+    minWidth: '180px',
+    flex: '1 1 220px',
+    '@media (max-width: 640px)': {
+      minWidth: 0,
+      width: '100%',
+      flexBasis: '100%',
+    },
+  },
+  resultsText: {
+    marginLeft: 'auto',
+    whiteSpace: 'nowrap',
+    '@media (max-width: 640px)': {
+      marginLeft: 0,
+      whiteSpace: 'normal',
+    },
   },
   tableWrapper: {
     overflowX: 'auto',
     backgroundColor: tokens.colorNeutralBackground1,
     borderRadius: tokens.borderRadiusMedium,
     boxShadow: tokens.shadow4,
+    WebkitOverflowScrolling: 'touch',
   },
   table: {
-    width: '100%',
+    width: 'max-content',
+    minWidth: '100%',
     borderCollapse: 'collapse',
     fontSize: tokens.fontSizeBase200,
   },
@@ -94,6 +127,9 @@ const useStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground3Hover,
     },
+    '@media (max-width: 640px)': {
+      padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    },
   },
   thContent: {
     display: 'flex',
@@ -107,6 +143,10 @@ const useStyles = makeStyles({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    '@media (max-width: 640px)': {
+      padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+      maxWidth: '220px',
+    },
   },
   tr: {
     ':hover': {
@@ -125,10 +165,18 @@ const useStyles = makeStyles({
     alignItems: 'center',
     padding: tokens.spacingVerticalM,
     borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    gap: tokens.spacingHorizontalM,
+    flexWrap: 'wrap',
+    '@media (max-width: 640px)': {
+      padding: tokens.spacingVerticalS,
+    },
   },
   paginationButtons: {
     display: 'flex',
     gap: tokens.spacingHorizontalS,
+    '@media (max-width: 480px)': {
+      width: '100%',
+    },
   },
   loading: {
     display: 'flex',
@@ -154,6 +202,9 @@ const useStyles = makeStyles({
     gridTemplateColumns: '1fr 1fr',
     gap: tokens.spacingVerticalS,
     marginTop: tokens.spacingVerticalM,
+    '@media (max-width: 640px)': {
+      gridTemplateColumns: '1fr',
+    },
   },
   detailField: {
     display: 'flex',
@@ -481,6 +532,7 @@ export default function CSVTicketTable() {
       <div className={styles.filters}>
         <Filter24Regular />
         <Dropdown
+          className={styles.filterControl}
           placeholder="Status"
           value={statusFilter || 'All Status'}
           onOptionSelect={(_, data) => {
@@ -497,6 +549,7 @@ export default function CSVTicketTable() {
         </Dropdown>
         
         <Dropdown
+          className={styles.filterControl}
           placeholder="Assignee"
           value={assigneeFilter || 'All Assignees'}
           onOptionSelect={(_, data) => {
@@ -509,7 +562,7 @@ export default function CSVTicketTable() {
           <Option value="unassigned">Unassigned</Option>
         </Dropdown>
         
-        <Text size={200} style={{ marginLeft: 'auto' }}>
+        <Text size={200} className={styles.resultsText}>
           Showing {tickets.length} of {total} tickets
         </Text>
       </div>
@@ -596,7 +649,7 @@ export default function CSVTicketTable() {
 
       {/* Ticket Detail Modal */}
       <Dialog open={detailOpen} onOpenChange={(_, data) => setDetailOpen(data.open)}>
-        <DialogSurface style={{ maxWidth: '700px' }}>
+        <DialogSurface style={{ width: 'min(700px, calc(100vw - 24px))', maxWidth: '700px' }}>
           <DialogBody>
             <DialogTitle
               action={
diff --git a/frontend/src/features/settings/SettingsPage.jsx b/frontend/src/features/settings/SettingsPage.jsx
index 23bfa23..732299c 100644
--- a/frontend/src/features/settings/SettingsPage.jsx
+++ b/frontend/src/features/settings/SettingsPage.jsx
@@ -51,11 +51,20 @@ const useStyles = makeStyles({
     gap: tokens.spacingVerticalL,
     maxWidth: '800px',
     margin: '0 auto',
+    '@media (max-width: 768px)': {
+      padding: tokens.spacingVerticalM,
+      gap: tokens.spacingVerticalM,
+    },
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalS,
+    },
   },
   header: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalM,
+    flexWrap: 'wrap',
   },
   sortableItem: {
     display: 'flex',
@@ -71,6 +80,11 @@ const useStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
     },
+    '@media (max-width: 640px)': {
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      gap: tokens.spacingHorizontalS,
+    },
   },
   dragging: {
     opacity: 0.5,
@@ -90,6 +104,7 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForeground4,
     fontFamily: 'monospace',
     fontSize: '12px',
+    overflowWrap: 'anywhere',
   },
   iconBtn: {
     minWidth: '32px',
@@ -108,11 +123,12 @@ const useStyles = makeStyles({
   },
   iconGrid: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(8, 1fr)',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(36px, 1fr))',
     gap: '4px',
     maxHeight: '300px',
     overflowY: 'auto',
     padding: tokens.spacingVerticalS,
+    width: 'min(320px, calc(100vw - 64px))',
   },
   iconGridItem: {
     width: '36px',
diff --git a/frontend/src/features/workbench/RunsSidePanel.jsx b/frontend/src/features/workbench/RunsSidePanel.jsx
index db67b38..d3cae51 100644
--- a/frontend/src/features/workbench/RunsSidePanel.jsx
+++ b/frontend/src/features/workbench/RunsSidePanel.jsx
@@ -27,6 +27,12 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground2,
     height: '100%',
     overflow: 'hidden',
+    '@media (max-width: 1024px)': {
+      width: '100%',
+      minWidth: 0,
+      borderLeft: 'none',
+      borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    },
   },
   header: {
     display: 'flex',
@@ -62,6 +68,7 @@ const useStyles = makeStyles({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalS,
   },
   agentName: {
     fontWeight: tokens.fontWeightSemibold,
@@ -70,6 +77,9 @@ const useStyles = makeStyles({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     maxWidth: '180px',
+    '@media (max-width: 480px)': {
+      maxWidth: '140px',
+    },
   },
   timestamp: {
     fontSize: tokens.fontSizeBase100,
diff --git a/frontend/src/features/workbench/WorkbenchPage.jsx b/frontend/src/features/workbench/WorkbenchPage.jsx
index 2ebf7f8..94fdf6f 100644
--- a/frontend/src/features/workbench/WorkbenchPage.jsx
+++ b/frontend/src/features/workbench/WorkbenchPage.jsx
@@ -29,17 +29,37 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: tokens.spacingVerticalL,
+    '@media (max-width: 768px)': {
+      padding: tokens.spacingVerticalM,
+      gap: tokens.spacingVerticalM,
+    },
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalS,
+    },
   },
   header: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalM,
+    flexWrap: 'wrap',
+  },
+  tabsScroller: {
+    overflowX: 'auto',
+    WebkitOverflowScrolling: 'touch',
+  },
+  tabList: {
+    minWidth: 'max-content',
   },
   agentsLayout: {
     display: 'flex',
     gap: tokens.spacingHorizontalL,
     alignItems: 'stretch',
     minHeight: '500px',
+    '@media (max-width: 1024px)': {
+      flexDirection: 'column',
+      minHeight: 'auto',
+    },
   },
   agentsMain: {
     flex: 1,
@@ -48,6 +68,9 @@ const useStyles = makeStyles({
   runsPanel: {
     width: '340px',
     flexShrink: 0,
+    '@media (max-width: 1024px)': {
+      width: '100%',
+    },
   },
 })
 
@@ -157,18 +180,21 @@ export default function WorkbenchPage() {
 
       {error && <Text style={{ color: tokens.colorPaletteRedForeground1 }}>{error}</Text>}
 
-      <TabList
-        selectedValue={activeTab}
-        onTabSelect={(_, data) => setActiveTab(data.value)}
-        data-testid="workbench-tabs"
-      >
-        <Tab value="agents" icon={<Apps24Regular />} data-testid="workbench-tab-agents">
-          Agents ({agents.length})
-        </Tab>
-        <Tab value="create" icon={<Add24Regular />} data-testid="workbench-tab-create">
-          Create Agent
-        </Tab>
-      </TabList>
+      <div className={styles.tabsScroller}>
+        <TabList
+          className={styles.tabList}
+          selectedValue={activeTab}
+          onTabSelect={(_, data) => setActiveTab(data.value)}
+          data-testid="workbench-tabs"
+        >
+          <Tab value="agents" icon={<Apps24Regular />} data-testid="workbench-tab-agents">
+            Agents ({agents.length})
+          </Tab>
+          <Tab value="create" icon={<Add24Regular />} data-testid="workbench-tab-create">
+            Create Agent
+          </Tab>
+        </TabList>
+      </div>
 
       {activeTab === 'agents' && (
         <div className={styles.agentsLayout}>
diff --git a/frontend/src/features/workflow/WorkflowPage.jsx b/frontend/src/features/workflow/WorkflowPage.jsx
index c941eb8..817a947 100644
--- a/frontend/src/features/workflow/WorkflowPage.jsx
+++ b/frontend/src/features/workflow/WorkflowPage.jsx
@@ -228,10 +228,40 @@ function renderCanvas(ctx, canvas, nodes, edges, selectedId, hoveredId, connecti
 // ============================================================================
 
 const useStyles = makeStyles({
-  container: { padding: tokens.spacingVerticalL, display: 'flex', flexDirection: 'column', gap: tokens.spacingVerticalM },
-  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+  container: {
+    padding: tokens.spacingVerticalL,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+    '@media (max-width: 768px)': {
+      padding: tokens.spacingVerticalM,
+    },
+    '@media (max-width: 480px)': {
+      padding: tokens.spacingVerticalS,
+    },
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: tokens.spacingHorizontalM,
+    flexWrap: 'wrap',
+  },
   toolbar: { display: 'flex', alignItems: 'center', gap: tokens.spacingHorizontalS, flexWrap: 'wrap' },
-  canvasWrap: { borderRadius: tokens.borderRadiusLarge, overflow: 'hidden', border: `1px solid ${tokens.colorNeutralStroke1}`, backgroundColor: '#f8fafc', cursor: 'default', position: 'relative' },
+  canvasWrap: {
+    borderRadius: tokens.borderRadiusLarge,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: '#f8fafc',
+    cursor: 'default',
+    position: 'relative',
+    WebkitOverflowScrolling: 'touch',
+  },
+  canvasInner: {
+    position: 'relative',
+    minWidth: '100%',
+  },
   wfBtn: { minWidth: '140px' },
   colorPicker: { display: 'flex', gap: '4px', alignItems: 'center' },
   colorDot: { width: '20px', height: '20px', borderRadius: '50%', cursor: 'pointer', border: '2px solid transparent', transition: 'transform 0.1s', ':hover': { transform: 'scale(1.2)' } },
@@ -240,7 +270,7 @@ const useStyles = makeStyles({
   legend: { display: 'flex', gap: tokens.spacingHorizontalL, flexWrap: 'wrap', padding: `${tokens.spacingVerticalXS} 0` },
   legendItem: { display: 'flex', alignItems: 'center', gap: '6px' },
   legendLine: { width: '24px', height: '6px', borderRadius: '3px' },
-  dialogSurface: { maxWidth: '500px' },
+  dialogSurface: { maxWidth: '500px', width: 'min(500px, calc(100vw - 24px))' },
 })
 
 // ============================================================================
@@ -267,6 +297,7 @@ export default function WorkflowPage() {
   const [canvasReady, setCanvasReady] = useState(0)
   const [connectMode, setConnectMode] = useState(false)
   const dragStartPos = useRef(null) // track if mouse actually moved (to distinguish click vs drag)
+  const canvasHeight = 460
 
   const switchWf = (key) => {
     const wf = WORKFLOWS[key]; if (!wf) return
@@ -276,11 +307,13 @@ export default function WorkflowPage() {
 
   const resize = useCallback(() => {
     const c = canvasRef.current, w = wrapRef.current; if (!c || !w) return
-    const dpr = window.devicePixelRatio || 1, ww = w.clientWidth
-    c.width = ww * dpr; c.height = 460 * dpr
-    c.style.width = ww + 'px'; c.style.height = '460px'
+    const dpr = window.devicePixelRatio || 1
+    const contentWidth = nodes.reduce((maxX, node) => Math.max(maxX, node.x), 0) + 160
+    const ww = Math.max(w.clientWidth, contentWidth)
+    c.width = ww * dpr; c.height = canvasHeight * dpr
+    c.style.width = ww + 'px'; c.style.height = `${canvasHeight}px`
     setCanvasReady((v) => v + 1)
-  }, [])
+  }, [nodes])
 
   useEffect(() => { resize(); window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize) }, [resize])
   useEffect(() => { const c = canvasRef.current; if (!c || !canvasReady) return; renderCanvas(c.getContext('2d'), c, nodes, edges, selectedId, hoveredId, connecting, mousePos, animProgress, connectMode) }, [nodes, edges, selectedId, hoveredId, connecting, mousePos, animProgress, canvasReady, connectMode])
@@ -377,20 +410,22 @@ export default function WorkflowPage() {
       </Card>
 
       <div className={styles.canvasWrap} ref={wrapRef}>
-        <canvas ref={canvasRef} onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp}
-          onMouseLeave={() => { setDragging(null); setConnecting(null); setHoveredId(null) }}
-          onClick={onClick} onDoubleClick={onDbl}
-          onKeyDown={(e) => { if (e.key === 'Escape') { setConnectMode(false); setConnecting(null) } }}
-          tabIndex={0}
-          style={{ display: 'block', cursor: connectMode ? 'crosshair' : 'default', outline: 'none' }}
-          data-testid="workflow-canvas" />
-        {editing && (
-          <div className={styles.editOverlay} style={{ left: editing.x - 80, top: editing.y - 16 }}>
-            <Input autoFocus value={editText} onChange={(_, d) => setEditText(d.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditing(null) }}
-              onBlur={commitEdit} style={{ width: '160px' }} data-testid="workflow-edit-input" />
-          </div>
-        )}
+        <div className={styles.canvasInner} style={{ height: `${canvasHeight}px` }}>
+          <canvas ref={canvasRef} onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp}
+            onMouseLeave={() => { setDragging(null); setConnecting(null); setHoveredId(null) }}
+            onClick={onClick} onDoubleClick={onDbl}
+            onKeyDown={(e) => { if (e.key === 'Escape') { setConnectMode(false); setConnecting(null) } }}
+            tabIndex={0}
+            style={{ display: 'block', cursor: connectMode ? 'crosshair' : 'default', outline: 'none' }}
+            data-testid="workflow-canvas" />
+          {editing && (
+            <div className={styles.editOverlay} style={{ left: editing.x - 80, top: editing.y - 16 }}>
+              <Input autoFocus value={editText} onChange={(_, d) => setEditText(d.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditing(null) }}
+                onBlur={commitEdit} style={{ width: '160px' }} data-testid="workflow-edit-input" />
+            </div>
+          )}
+        </div>
       </div>
 
       <div className={styles.legend}>

From f72dd03fdb473a62ece4675266967893bd795166 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Apr 2026 11:24:28 +0000
Subject: [PATCH 2/2] fix: normalize import indentation in App.jsx to
 consistent 2-space style

Agent-Logs-Url: https://github.com/abossard/python-quart-vite-react/sessions/7389d2d3-93ec-4ab8-ae29-3d4f3a0cb093

Co-authored-by: btesterc <116953132+btesterc@users.noreply.github.com>
---
 frontend/src/App.jsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f280c1b..56c85b7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -9,24 +9,24 @@
 
 import {
   Button,
-    makeStyles,
+  makeStyles,
+  Subtitle1,
   Subtitle2,
-    Subtitle1,
-    Text,
-    tokens,
+  Text,
+  tokens,
 } from '@fluentui/react-components'
 import {
-    Bot24Regular,
+  Bot24Regular,
   ChevronLeft24Regular,
   ChevronRight24Regular,
-    DataHistogram24Regular,
-    DocumentEdit24Regular,
-    Flow24Regular,
-    Info24Regular,
-    Pulse24Regular,
-    Settings24Regular,
-    Table24Regular,
-    Wrench24Regular,
+  DataHistogram24Regular,
+  DocumentEdit24Regular,
+  Flow24Regular,
+  Info24Regular,
+  Pulse24Regular,
+  Settings24Regular,
+  Table24Regular,
+  Wrench24Regular,
 } from '@fluentui/react-icons'
 import { useEffect, useMemo, useState } from 'react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'