From 69f2fef943bbf9012b0a7aaa9dd7cee996d3e7e2 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Tue, 6 Oct 2026 05:29:09 -0700
Subject: [PATCH] feat: move the flow canvas zoom controls to the bottom left,
 clear of the assistant launcher, in the app and the site mocks

---
 site/src/components/AutomationsDemo.astro     | 6 +++---
 site/src/components/CampaignBuilderMock.astro | 4 ++--
 web/src/components/app/flow/FlowCanvas.tsx    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/AutomationsDemo.astro b/site/src/components/AutomationsDemo.astro
index d49df8ce5..41403f38e 100644
--- a/site/src/components/AutomationsDemo.astro
+++ b/site/src/components/AutomationsDemo.astro
@@ -9,7 +9,7 @@
  *   - the tree canvas at the zoom it opens at: StepCard nodes laid out top
  *     down on a dot grid, the If / else splitting into Yes and No columns, a +
  *     at the end of each path (a line's own + shows on hover), zoom controls
- *     bottom right
+ *     bottom left
  *   - the Test panel (InsightsPanel in a bare FlowPanel, 400px beside the
  *     canvas): the dry-run intro, the sample event, the steps to run, Run
  *     test, then one NodeResultRow per node the run touched. The finished run
@@ -202,8 +202,8 @@ const trace: Row[] = [
             </div>
           </div>
 
-          <!-- Panel bottom-right: zoom controls -->
-          <div class="absolute right-[15px] bottom-[15px] z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white p-0.5 shadow-sm">
+          <!-- Panel bottom-left: zoom controls -->
+          <div class="absolute left-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
             <span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={minusIcon}></svg></span>
             <span class="inline-flex h-7 min-w-11 items-center justify-center rounded-md px-1 text-[11.5px] tabular-nums text-slate-600">{Math.round(ZOOM * 100)}%</span>
             <span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={plusIcon}></svg></span>
diff --git a/site/src/components/CampaignBuilderMock.astro b/site/src/components/CampaignBuilderMock.astro
index 412214eb3..19b98e458 100644
--- a/site/src/components/CampaignBuilderMock.astro
+++ b/site/src/components/CampaignBuilderMock.astro
@@ -303,8 +303,8 @@ const rootClass = ['cb relative w-full bg-white text-slate-900 flex flex-col', o
 
       <!-- The surface: a dot grid that moves with the view -->
       <div class="relative min-h-0 flex-1 overflow-hidden bg-slate-50/40" style="background-image: radial-gradient(circle, #dde3eb 1px, transparent 1.2px); background-size: 20px 20px;">
-        <!-- ZoomControls (bottom right) -->
-        <div class="absolute right-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
+        <!-- ZoomControls (bottom left) -->
+        <div class="absolute left-3 bottom-3 z-[5] flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm">
           <span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={ic.minus}></svg></span>
           <span class="inline-flex h-7 min-w-11 items-center justify-center rounded-md px-1 text-[11.5px] tabular-nums text-slate-600">100%</span>
           <span class="inline-flex size-7 items-center justify-center rounded-md text-slate-500"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={ic.plus}></svg></span>
diff --git a/web/src/components/app/flow/FlowCanvas.tsx b/web/src/components/app/flow/FlowCanvas.tsx
index f514184f4..37620bd39 100644
--- a/web/src/components/app/flow/FlowCanvas.tsx
+++ b/web/src/components/app/flow/FlowCanvas.tsx
@@ -794,7 +794,7 @@ function ZoomControls({
         <div
             data-no-pan
             onClick={(e) => e.stopPropagation()}
-            className="absolute bottom-3 right-3 z-10 flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm backdrop-blur"
+            className="absolute bottom-3 left-3 z-10 flex items-center gap-0.5 rounded-lg border border-slate-200 bg-white/95 p-0.5 shadow-sm backdrop-blur"
         >
             <button type="button" className={btn} aria-label="Zoom out" title="Zoom out (⌘−)" onClick={() => onZoom(1 / 1.25)}>
                 <MinusIcon className="size-3.5" />