refactor(ui): group top-right canvas buttons in a flex row

frontend/src/components/toolbar/ExportToolbar.tsx

@@ -111,7 +111,7 @@ export function ExportToolbar({ diagramId }: ExportToolbarProps) {
   if (!diagramId) return null
 
   return (
-    <div style={{ position: 'absolute', right: 12, top: 12, zIndex: 10 }}>
+    <div style={{ position: 'relative' }}>
       <button
         onClick={() => setOpen((v) => !v)}
         title="Export diagram"

frontend/src/components/toolbar/FlowsPanel.tsx

@@ -33,7 +33,9 @@ export function FlowsPanel({ diagramId }: FlowsPanelProps) {
   }
 
   return (
-    <div style={{ position: 'absolute', right: 16, top: 16, zIndex: 10 }}>
+    // Position is owned by the parent flex row in DiagramPage; we only need
+    // `relative` here so the panel can anchor to this button.
+    <div style={{ position: 'relative' }}>
       <button
         onClick={() => setOpen((v) => !v)}
         style={{

frontend/src/pages/DiagramPage.tsx

@@ -486,10 +486,15 @@ export function DiagramPage() {
                 Draft
               </div>
             )}
-            {diagramId && <FlowsPanel diagramId={diagramId} />}
+            {/* Top-right canvas button cluster. Children flow left-to-right
+                via flex; each one only owns its own width, so adding or
+                removing a button here doesn't require recalculating offsets. */}
+            <div className="absolute right-4 top-4 z-10 flex items-center gap-2">
+              <ExportToolbar diagramId={diagramId} />
+              {diagramId && <FlowsPanel diagramId={diagramId} />}
+            </div>
             {diagramId && <FlowPlaybackBar diagramId={diagramId} />}
             <FilterToolbar />
-            <ExportToolbar diagramId={diagramId} />
           </div>
           {selectedEdgeId ? <EdgeSidebar diagramId={diagramId} /> : <ObjectSidebar diagramId={diagramId} draftId={diagram?.draft_id ?? null} />}
         </div>