improved a lot of things

packages/app/src/components/canvas/Canvas.tsx

@@ -3,7 +3,6 @@
 import { useRef, useEffect, useCallback } from 'react';
 import { useViewport } from '@/store/viewport';
 import { useCanvas } from '@/store/canvas';
-import { useWorkspace } from '@/hooks/useWorkspace';
 import { useArtboards } from '@/hooks/useArtboards';
 import { Artboard } from './Artboard';
 
@@ -12,10 +11,8 @@ export function Canvas() {
   const panX          = useViewport((s) => s.panX);
   const panY          = useViewport((s) => s.panY);
   const zoom          = useViewport((s) => s.zoom);
-  const { activeTool, selectArtboard } = useCanvas();
-
-  const { data: workspace } = useWorkspace();
-  const { artboards } = useArtboards(workspace?.id);
+  const { activeTool, selectArtboard, workspaceId } = useCanvas();
+  const { artboards } = useArtboards(workspaceId ?? undefined);
 
   const isPanning = useRef(false);
   const lastPos   = useRef({ x: 0, y: 0 });

packages/app/src/components/chrome/AppChrome.tsx

@@ -19,6 +19,12 @@ interface AppChromeProps {
 
 export function AppChrome({ workspaceId, projectId, workspaceName, projectName }: AppChromeProps) {
   const selectedArtboardId = useCanvas((s) => s.selectedArtboardId);
+  const setContext = useCanvas((s) => s.setContext);
+
+  // Push workspace/project IDs into the store so Canvas and Navigator can read them.
+  useEffect(() => {
+    if (workspaceId && projectId) setContext(workspaceId, projectId);
+  }, [workspaceId, projectId, setContext]);
 
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
@@ -37,24 +43,28 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [selectedArtboardId]);
-  const showBreadcrumb = workspaceId && projectId;
+
+  const showBreadcrumb = Boolean(workspaceId && projectId);
 
   return (
+    // Outer flex-column: breadcrumb on top (fixed height), inner grid fills the rest.
+    // Breadcrumb lives OUTSIDE the grid so the Toolbar/panel gridRow placements
+    // never shift regardless of whether the breadcrumb is visible.
     <div
       style={{
-        display: 'grid',
-        gridTemplateRows: showBreadcrumb ? '36px 44px 1fr' : '44px 1fr',
-        gridTemplateColumns: '220px 1fr 272px',
+        display: 'flex',
+        flexDirection: 'column',
         height: '100dvh',
         overflow: 'hidden',
         background: '#0C0C10',
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       }}
     >
-      {/* Breadcrumb bar — spans all 3 columns, only shown when project context is set */}
+      {/* ── Breadcrumb bar ─────────────────────────────────── */}
       {showBreadcrumb && (
         <div style={{
-          gridColumn: '1 / -1',
+          height: 36,
+          flexShrink: 0,
           background: '#0A0A0E',
           borderBottom: '1px solid rgba(255,255,255,0.06)',
           display: 'flex', alignItems: 'center',
@@ -87,17 +97,29 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
 
           <div style={{ flex: 1 }} />
 
-          {/* User avatar in the top-right corner of canvas */}
           <div style={{ transform: 'scale(0.8)', transformOrigin: 'right center' }}>
             <UserButton />
           </div>
         </div>
       )}
 
-      <Toolbar />
-      <ArtboardNavigator />
-      <Canvas />
-      <Inspector />
+      {/* ── Inner grid: Toolbar (row 1) + panels (row 2) ─── */}
+      {/* Rows are always 44px + 1fr — breadcrumb never enters this grid. */}
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'grid',
+          gridTemplateRows: '44px 1fr',
+          gridTemplateColumns: '220px 1fr 272px',
+          overflow: 'hidden',
+        }}
+      >
+        <Toolbar />
+        <ArtboardNavigator />
+        <Canvas />
+        <Inspector />
+      </div>
     </div>
   );
 }

packages/app/src/components/navigator/ArtboardNavigator.tsx

@@ -5,7 +5,6 @@ import { useFileTree, FileTree } from '@pierre/trees/react';
 import { themeToTreeStyles } from '@pierre/trees';
 import { SquareRegular } from '@fluentui/react-icons';
 import { useCanvas } from '@/store/canvas';
-import { useWorkspace } from '@/hooks/useWorkspace';
 import { useArtboards } from '@/hooks/useArtboards';
 
 const FILE_PATHS = [
@@ -48,9 +47,8 @@ const treeThemeStyles = themeToTreeStyles({
 });
 
 export function ArtboardNavigator() {
-  const { selectedArtboardId, selectArtboard } = useCanvas();
-  const { data: workspace } = useWorkspace();
-  const { artboards } = useArtboards(workspace?.id);
+  const { selectedArtboardId, selectArtboard, workspaceId } = useCanvas();
+  const { artboards } = useArtboards(workspaceId ?? undefined);
 
   const { model } = useFileTree({
     paths: FILE_PATHS,