Merge pull request #42 from mayuki/hotfix/ResizeIssue

fix: Prevent unnecessary layout call.
mayuki · Aug 18, 2020 · 8cfb326 · 8cfb326
2 parents a796a0d + 3e41dff
commit 8cfb326
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/Rin.Frontend/src/components/inspector/InspectorDetail.RequestResponseView.tsx b/src/Rin.Frontend/src/components/inspector/InspectorDetail.RequestResponseView.tsx
@@ -203,14 +203,12 @@ function EditorPreview(props: {
 
   useEffect(() => {
     const listener = () => {
-      editor?.layout({ width: 0, height: 0 });
       editor?.layout();
     };
 
     window.addEventListener('resize', listener);
 
     // force re-layout
-    editor?.layout({ width: 0, height: 0 });
     editor?.layout();
 
     return () => window.removeEventListener('resize', listener);
@@ -223,15 +221,17 @@ function EditorPreview(props: {
   };
 
   return (
-    <MonacoEditor
-      width="100%"
-      height="100%"
-      options={monacoOptions}
-      theme={props.theme ?? 'vs'}
-      language={props.language ?? getMonacoLanguage(props.contentType)}
-      value={props.body}
-      editorDidMount={(editor) => setEditor(editor)}
-    />
+    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+      <MonacoEditor
+        width="100%"
+        height="100%"
+        options={monacoOptions}
+        theme={props.theme ?? 'vs'}
+        language={props.language ?? getMonacoLanguage(props.contentType)}
+        value={props.body}
+        editorDidMount={(editor) => setEditor(editor)}
+      />
+    </div>
   );
 }