From f56dfea838b902cfb81a33930e91392895d0499d Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Thu, 4 Jun 2026 13:00:29 +0200
Subject: [PATCH] fix(liveview): allow zoom-out to 0.25 so large infra fits

View-only mode set no minZoom, so React Flow defaulted to 0.5 and big
canvases couldn't zoom out far enough to fit. Match the editor's bounds
(minZoom 0.25, maxZoom 2.5). Add a regression test asserting the props.

ha-relevant: maybe
---
 frontend/src/components/LiveView.tsx          |  2 ++
 .../components/__tests__/LiveView.test.tsx    | 20 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/LiveView.tsx b/frontend/src/components/LiveView.tsx
index 381a7aa..e366a61 100644
--- a/frontend/src/components/LiveView.tsx
+++ b/frontend/src/components/LiveView.tsx
@@ -158,6 +158,8 @@ function LiveViewCanvas() {
         elementsSelectable={false}
         panOnDrag
         zoomOnScroll
+        minZoom={0.25}
+        maxZoom={2.5}
         colorMode={theme.colors.reactFlowColorMode}
         connectionMode={ConnectionMode.Loose}
         onNodeClick={onNodeClick}
diff --git a/frontend/src/components/__tests__/LiveView.test.tsx b/frontend/src/components/__tests__/LiveView.test.tsx
index 89c6b39..c77ac33 100644
--- a/frontend/src/components/__tests__/LiveView.test.tsx
+++ b/frontend/src/components/__tests__/LiveView.test.tsx
@@ -5,9 +5,15 @@ import { useThemeStore } from '@/stores/themeStore'
 
 // ── Mock heavy dependencies ────────────────────────────────────────────────
 
+// Capture props passed to ReactFlow so we can assert zoom bounds etc.
+let rfProps: Record<string, unknown> = {}
+
 vi.mock('@xyflow/react', () => ({
   ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  ReactFlow: () => <div data-testid="react-flow" />,
+  ReactFlow: (props: Record<string, unknown>) => {
+    rfProps = props
+    return <div data-testid="react-flow" />
+  },
   Background: () => null,
   Controls: () => null,
   BackgroundVariant: { Dots: 'dots' },
@@ -49,6 +55,7 @@ const canvasPayload = {
 
 describe('LiveView (non-standalone)', () => {
   beforeEach(() => {
+    rfProps = {}
     vi.mocked(liveviewApi.load).mockReset()
     useCanvasStore.setState({ nodes: [], edges: [] })
   })
@@ -114,6 +121,17 @@ describe('LiveView (non-standalone)', () => {
     expect(liveviewApi.load).toHaveBeenCalledWith('correct-key')
   })
 
+  it('allows zooming out to 0.25 so large infra fits (matches the editor)', async () => {
+    setSearch('?key=correct-key')
+    vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)
+    render(<LiveView />)
+    await waitFor(() => expect(screen.getByTestId('react-flow')).toBeDefined())
+    // Without an explicit minZoom, React Flow defaults to 0.5 and big canvases
+    // can't zoom out far enough to fit.
+    expect(rfProps.minZoom).toBe(0.25)
+    expect(rfProps.maxZoom).toBe(2.5)
+  })
+
   it('loads nodes into the canvas store on success', async () => {
     setSearch('?key=secret')
     vi.mocked(liveviewApi.load).mockResolvedValue(canvasPayload as never)