From ee177393fabf9df5f3eea5e06abe34aadf1ddb7a Mon Sep 17 00:00:00 2001
From: Billy Vong <billy@sentry.io>
Date: Mon, 20 Dec 2021 14:04:42 -0500
Subject: [PATCH] fix: Update editor height when resizing window

---
 src/ScriptEditor/ui/ScriptEditorRoot.tsx | 33 ++++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/ScriptEditor/ui/ScriptEditorRoot.tsx b/src/ScriptEditor/ui/ScriptEditorRoot.tsx
index a5456c1bb..3343cd840 100644
--- a/src/ScriptEditor/ui/ScriptEditorRoot.tsx
+++ b/src/ScriptEditor/ui/ScriptEditorRoot.tsx
@@ -125,6 +125,25 @@ export function Root(props: IProps): React.ReactElement {
     vim: props.vim || Settings.MonacoVim,
   });
 
+  const [dimensions, setDimensions] = useState({
+  height: window.innerHeight,
+  width: window.innerWidth
+  });
+  useEffect(() => {
+  const debouncedHandleResize = debounce(function handleResize() {
+  setDimensions({
+  height: window.innerHeight,
+  width: window.innerWidth
+  })
+  }, 250)
+
+  window.addEventListener('resize', debouncedHandleResize)
+
+  return () => {
+  window.removeEventListener('resize', debouncedHandleResize)
+
+  }}, [])
+
   useEffect(() => {
     // Save currentScript
     window.localStorage.setItem(
@@ -636,10 +655,14 @@ export function Root(props: IProps): React.ReactElement {
   }
 
   // TODO: Make this responsive to window resizes
-  // Toolbars are roughly 108px + vim bar 34px
-  // Get percentage of space that toolbars represent and the rest should be the
-  // editor
-  const editorHeight = 100 - ((108 + (options.vim ? 34 : 0)) / window.innerHeight) * 100;
+  // Toolbars are roughly 112px:
+  //  8px body margin top
+  //  38.5px filename tabs
+  //  5px padding for top of editor
+  //  44px bottom tool bar + 16px margin
+  //  + vim bar 34px
+  const editorHeight = dimensions.height - (112 + (options.vim ? 34 : 0));
+  console.log({editorHeight})
 
   return (
     <>
@@ -718,7 +741,7 @@ export function Root(props: IProps): React.ReactElement {
           beforeMount={beforeMount}
           onMount={onMount}
           loading={<Typography>Loading script editor!</Typography>}
-          height={`${editorHeight}%`}
+          height={`${editorHeight}px`}
           defaultLanguage="javascript"
           defaultValue={""}
           onChange={updateCode}