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

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),

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

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);
   };