From 985a9eda33d30a9e466e1cbd5f97abbffa5856d2 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Tue, 4 Apr 2023 22:10:39 -0700
Subject: [PATCH] Fix Visualiser cropping issue

Summary:
An issue was reported for the visualiser whereas there seemed to be some cropping taking place on the right hand side.

https://pxl.cl/2BhPT

The issue was the resizable panel and visualiser both were set with the same width.

The resizable panel was set as to have a gutter which was not taken into consideration, add this width to the panel width and that fixes the issue.

Also change box sizing model as to not affect the dimensions of the wireframe.

Reviewed By: LukeDefeo

Differential Revision: D44664377

fbshipit-source-id: e640af2090f7c3378e624626fe3ea5df631caa11
---
 .../plugins/public/ui-debugger/components/Visualization2D.tsx  | 1 +
 desktop/plugins/public/ui-debugger/components/main.tsx         | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 9e57707f7..a7ff8c255 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -355,6 +355,7 @@ const NodeBorder = styled.div<{tags: Tag[]; hovered: boolean}>((props) => ({
   left: 0,
   bottom: 0,
   right: 0,
+  boxSizing: 'border-box',
   borderWidth: props.hovered ? '2px' : '1px',
   borderStyle: 'solid',
   color: 'transparent',
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 7bc0d39a1..445c7072b 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -15,6 +15,7 @@ import {
   usePlugin,
   useValue,
   _Sidebar as ResizablePanel,
+  theme,
 } from 'flipper-plugin';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {Id, Metadata, MetadataId, UINode} from '../types';
@@ -65,7 +66,7 @@ export function Component() {
                 <ResizablePanel
                   position="right"
                   minWidth={200}
-                  width={visualiserWidth}
+                  width={visualiserWidth + theme.space.large}
                   maxWidth={800}
                   onResize={(width) => {
                     instance.uiActions.setVisualiserWidth(width);