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={Loading script editor!} - height={`${editorHeight}%`} + height={`${editorHeight}px`} defaultLanguage="javascript" defaultValue={""} onChange={updateCode}