From f9a9657b5e25e77233582f58e83ffcb91c5fb6d4 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Fri, 7 Aug 2026 23:53:48 +0200
Subject: [PATCH] ux(canvas): zoom controls float on the canvas' bottom-right
 corner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The canvas header runs out of room when the AI chat panel docks on the
right — the board selector clipped and the zoom cluster was squeezed out
entirely. The −/%/+ cluster now floats on the circuit canvas' bottom-right
corner (always free), with stopPropagation so a click never starts a pan.
---
 .../components/simulator/SimulatorCanvas.css  |  12 ++
 .../components/simulator/SimulatorCanvas.tsx  | 129 ++++++++++--------
 2 files changed, 82 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/simulator/SimulatorCanvas.css b/frontend/src/components/simulator/SimulatorCanvas.css
index ae3ca489..c7a7a3a8 100644
--- a/frontend/src/components/simulator/SimulatorCanvas.css
+++ b/frontend/src/components/simulator/SimulatorCanvas.css
@@ -264,6 +264,18 @@
   height: 28px;
 }
 
+/* Floating variant: pinned to the canvas' bottom-right corner (the header
+   got too tight once the AI chat panel docks on the right). Sits above the
+   canvas layers; dialogs/modals portal to <body> so they stay on top. */
+.zoom-controls--floating {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 60;
+  height: 32px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
+}
+
 .zoom-btn {
   display: flex;
   align-items: center;
diff --git a/frontend/src/components/simulator/SimulatorCanvas.tsx b/frontend/src/components/simulator/SimulatorCanvas.tsx
index 60f0ab0b..378b6ef5 100644
--- a/frontend/src/components/simulator/SimulatorCanvas.tsx
+++ b/frontend/src/components/simulator/SimulatorCanvas.tsx
@@ -2860,65 +2860,9 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
               </div>
 
               <div className="canvas-header-right">
-                {/* Zoom controls */}
-                <div className="zoom-controls">
-                  <button
-                    className="zoom-btn"
-                    onClick={() =>
-                      handleWheel({
-                        deltaY: 100,
-                        clientX: 0,
-                        clientY: 0,
-                        preventDefault: () => {},
-                      } as any)
-                    }
-                    title={t('editor.canvas.zoomOut')}
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2.5"
-                      strokeLinecap="round"
-                    >
-                      <line x1="5" y1="12" x2="19" y2="12" />
-                    </svg>
-                  </button>
-                  <button
-                    className="zoom-level"
-                    onClick={handleResetView}
-                    title={t('editor.canvas.resetView')}
-                  >
-                    {Math.round(zoom * 100)}%
-                  </button>
-                  <button
-                    className="zoom-btn"
-                    onClick={() =>
-                      handleWheel({
-                        deltaY: -100,
-                        clientX: 0,
-                        clientY: 0,
-                        preventDefault: () => {},
-                      } as any)
-                    }
-                    title={t('editor.canvas.zoomIn')}
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2.5"
-                      strokeLinecap="round"
-                    >
-                      <line x1="12" y1="5" x2="12" y2="19" />
-                      <line x1="5" y1="12" x2="19" y2="12" />
-                    </svg>
-                  </button>
-                </div>
+                {/* Zoom moved to a floating cluster on the canvas'
+                    bottom-right corner — the header gets too tight when the
+                    AI chat panel is docked. */}
 
                 {/* Component count */}
                 <span
@@ -3224,6 +3168,73 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
               }
               return null;
             })()}
+
+          {/* Floating zoom controls — pinned to the canvas' bottom-right
+              corner (they lived in the canvas header, which gets too tight
+              when the AI chat panel is docked; the corner is always free).
+              stopPropagation so a click never starts a canvas pan/selection. */}
+          <div
+            className="zoom-controls zoom-controls--floating"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              className="zoom-btn"
+              onClick={() =>
+                handleWheel({
+                  deltaY: 100,
+                  clientX: 0,
+                  clientY: 0,
+                  preventDefault: () => {},
+                } as any)
+              }
+              title={t('editor.canvas.zoomOut')}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+              >
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+            <button
+              className="zoom-level"
+              onClick={handleResetView}
+              title={t('editor.canvas.resetView')}
+            >
+              {Math.round(zoom * 100)}%
+            </button>
+            <button
+              className="zoom-btn"
+              onClick={() =>
+                handleWheel({
+                  deltaY: -100,
+                  clientX: 0,
+                  clientY: 0,
+                  preventDefault: () => {},
+                } as any)
+              }
+              title={t('editor.canvas.zoomIn')}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>