From 9dfe912f65ec40143d7dbd40a2f7059a2c695caf Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Thu, 3 Mar 2022 12:35:38 +0100
Subject: [PATCH] Get rid of the scrollbars in SnapshotEditor

---
 packages/r3f/src/components/SnapshotEditor.tsx             | 4 +++-
 theatre/studio/src/UIRoot/PanelsRoot.tsx                   | 7 +++++--
 .../{PaneWrapper.tsx => ExtensionPaneWrapper.tsx}          | 7 ++++---
 3 files changed, 12 insertions(+), 6 deletions(-)
 rename theatre/studio/src/panels/BasePanel/{PaneWrapper.tsx => ExtensionPaneWrapper.tsx} (97%)

diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx
index 494152c..d18a482 100644
--- a/packages/r3f/src/components/SnapshotEditor.tsx
+++ b/packages/r3f/src/components/SnapshotEditor.tsx
@@ -74,12 +74,14 @@ const Wrapper = styled.div`
   right: 0px;
   bottom: 0px;
   left: 0px;
+  overflow: hidden;
 `
 
 const CanvasWrapper = styled.div`
   display: relative;
   z-index: 0;
   height: 100%;
+  overflow: hidden;
 `
 
 const Overlay = styled.div`
@@ -138,7 +140,7 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
   if (!editorObject) return <></>
 
   return (
-    <root.div>
+    <root.div style={{overflow: 'hidden'}}>
       <StyleSheetManager disableVendorPrefixes>
         <>
           <GlobalStyle />
diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx
index a1f62cb..a5d8a43 100644
--- a/theatre/studio/src/UIRoot/PanelsRoot.tsx
+++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx
@@ -3,14 +3,17 @@ import DetailPanel from '@theatre/studio/panels/DetailPanel/DetailPanel'
 import React from 'react'
 import getStudio from '@theatre/studio/getStudio'
 import {useVal} from '@theatre/react'
-import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
+import ExtensionPaneWrapper from '@theatre/studio/panels/BasePanel/ExtensionPaneWrapper'
 import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 
 const PanelsRoot: React.FC = () => {
   const panes = useVal(getStudio().paneManager.allPanesD)
   const paneEls = Object.entries(panes).map(([instanceId, paneInstance]) => {
     return (
-      <PaneWrapper key={`pane-${instanceId}`} paneInstance={paneInstance!} />
+      <ExtensionPaneWrapper
+        key={`pane-${instanceId}`}
+        paneInstance={paneInstance!}
+      />
     )
   })
 
diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
similarity index 97%
rename from theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
rename to theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
index 7d11807..d22d55e 100644
--- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
@@ -23,7 +23,7 @@ const defaultPosition: PanelPosition = {
 
 const minDims = {width: 300, height: 300}
 
-const PaneWrapper: React.FC<{
+const ExtensionPaneWrapper: React.FC<{
   paneInstance: PaneInstance<$FixMe>
 }> = ({paneInstance}) => {
   return (
@@ -38,7 +38,8 @@ const PaneWrapper: React.FC<{
 }
 
 const Container = styled(PanelWrapper)`
-  overflow-y: hidden;
+  overflow: hidden;
+
   display: flex;
   flex-direction: column;
 
@@ -160,4 +161,4 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   )
 }
 
-export default PaneWrapper
+export default ExtensionPaneWrapper