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

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