From f9bbc967ea7587e816c6c6ba4081f2523c9a4a79 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 19 Jun 2023 05:06:52 -0700
Subject: [PATCH] Fix visualiser after virtualisation

Summary: There was an issue with cropping introduce by virtualisation and the position of the scroll view in the hierachy. Its a bit fragile but it works now.

Reviewed By: lblasa

Differential Revision: D46761831

fbshipit-source-id: ce001c6f4fe7ddc111edf0098f75a1273c84472d
---
 .../ui-debugger/components/Visualization2D.tsx       |  3 +++
 .../plugins/public/ui-debugger/components/main.tsx   | 12 +++++-------
 desktop/plugins/public/ui-debugger/index.tsx         |  1 -
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index ea0c10367..dfb13db5e 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -111,6 +111,9 @@ export const Visualization2D: React.FC<
         //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
         style={
           {
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            position: 'relative', //this is for the absolutely positioned overlays
             [pxScaleFactorCssVar]: pxScaleFactor,
             width: toPx(focusState.actualRoot.bounds.width),
             height: toPx(focusState.actualRoot.bounds.height),
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 5eeab1107..821918215 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -96,13 +96,11 @@ export function Component() {
                     instance.uiActions.setVisualiserWidth(width);
                   }}
                   gutter>
-                  <Layout.ScrollContainer vertical>
-                    <Visualization2D
-                      width={visualiserWidth}
-                      nodes={nodes}
-                      onSelectNode={instance.uiActions.onSelectNode}
-                    />
-                  </Layout.ScrollContainer>
+                  <Visualization2D
+                    width={visualiserWidth}
+                    nodes={nodes}
+                    onSelectNode={instance.uiActions.onSelectNode}
+                  />
                 </ResizablePanel>
                 <DetailSidebar width={350}>
                   <Inspector
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index b84fb5970..6caa88d7a 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -429,7 +429,6 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
   };
 
   const setVisualiserWidth = (width: number) => {
-    console.log('w', width);
     uiState.visualiserWidth.set(width);
   };