From 3db3e724cbe6fe90346451cbbaf1e2020cad8a78 Mon Sep 17 00:00:00 2001
From: Andrey Avtomonov <andreybavt@gmail.com>
Date: Wed, 20 May 2026 01:29:03 +0200
Subject: [PATCH] fix(docs): stop semantic-layer flow from trapping page scroll
 (#175)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wheel events over the embedded ReactFlow diagram were captured by
zoomOnScroll + preventScrolling, blocking page scroll once the pointer
crossed into the diagram — even at min zoom. Disable wheel-zoom and let
the page handle scroll, keep Cmd/Ctrl + scroll as the zoom escape hatch
(default zoomActivationKeyCode), and remove the inaccessible Controls
that sat at the bottom of the 2340px-tall canvas. Hint badge updated.
---
 docs-site/components/semantic-layer-flow.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs-site/components/semantic-layer-flow.tsx b/docs-site/components/semantic-layer-flow.tsx
index 770516ad..b6d06dbf 100644
--- a/docs-site/components/semantic-layer-flow.tsx
+++ b/docs-site/components/semantic-layer-flow.tsx
@@ -4,7 +4,6 @@ import { useCallback, useState } from "react";
 import {
   Background,
   BackgroundVariant,
-  Controls,
   Handle,
   MarkerType,
   type Node,
@@ -1036,7 +1035,7 @@ export function SemanticLayerFlow() {
           }}
         >
           <div className="pointer-events-none absolute right-2.5 top-2.5 z-10 rounded border border-fd-border/50 bg-white/30 px-1.5 py-px font-mono text-[9.5px] font-medium uppercase tracking-[0.06em] text-fd-muted-foreground shadow-sm backdrop-blur-sm dark:bg-white/10">
-            Pan / zoom
+            Drag to pan • ⌘/Ctrl + scroll to zoom
           </div>
           <ReactFlow
             nodes={nodes}
@@ -1050,15 +1049,14 @@ export function SemanticLayerFlow() {
             elementsSelectable={false}
             panOnDrag
             panOnScroll={false}
-            zoomOnScroll
+            zoomOnScroll={false}
             zoomOnPinch
             zoomOnDoubleClick
-            preventScrolling
+            preventScrolling={false}
             minZoom={minZoom}
             maxZoom={1.5}
             proOptions={{ hideAttribution: true }}
           >
-            <Controls position="bottom-right" showInteractive={false} />
             <Background
               variant={BackgroundVariant.Dots}
               gap={18}