Fix heights/sizing on resize

DrJKL · Aug 3, 2023 · 5eaab2b · 5eaab2b
1 parent 634397c
commit 5eaab2b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -2,18 +2,19 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport"
-        content="width=device-width, initial-scale=1.0" />
-  <link href="/dist/index.css"
-        rel="stylesheet">
-  <title>Prompt Crafter</title>
+      <meta charset="UTF-8" />
+      <meta name="viewport"
+            content="width=device-width, initial-scale=1.0" />
+      <link href="/dist/index.css"
+            rel="stylesheet">
+      <title>Prompt Crafter</title>
 </head>
 
 <body>
-  <div id="root"></div>
-  <script type="module"
-          src="/src/main.tsx"></script>
+      <div id="root"
+           class="contents"></div>
+      <script type="module"
+              src="/src/main.tsx"></script>
 </body>
 
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,9 @@
 import { AppBar, CssBaseline, Paper, Toolbar, Typography } from '@mui/material';
 import { Editor } from './components/Editor';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useMonaco } from '@monaco-editor/react';
 import { conf, language } from './common/sdprompt_monaco';
+import monaco from 'monaco-editor';
 function App() {
   const [promptText, setPromptText] = useState(
     localStorage.getItem('pc.active_prompt') ?? '',
@@ -22,6 +23,12 @@ function App() {
     localStorage.setItem('pc.active_prompt', promptText);
   }, [promptText]);
 
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor) {
+    editorRef.current = editor;
+  }
+
   function handleEditorTextChange(value: string | undefined) {
     if (value) {
       setPromptText(value);
@@ -31,11 +38,13 @@ function App() {
     return prompt.split(/\s*,\s*/);
   }
 
+  editorRef.current?.layout();
+
   return (
     <>
       <CssBaseline />
-      <div className="grid grid-cols-1 grid-rows-[auto_1fr]">
-        <AppBar classes="grid">
+      <div className="h-full grid grid-cols-1 grid-rows-[auto_minmax(0,_1fr)]">
+        <AppBar>
           <Toolbar className="flex flex-auto justify-between">
             <Typography
               className="flex-auto select-none"
@@ -55,15 +64,15 @@ function App() {
         <main className="grid grid-cols-2 grid-rows-1 p-4 gap-4">
           <Paper elevation={16}>
             <Editor
-              options={{ padding: { top: 1 }, automaticLayout: true }}
+              onMount={handleEditorDidMount}
               defaultValue={promptText}
               onChange={handleEditorTextChange}
             />
           </Paper>
           <Paper elevation={16}>
-            <div className="whitespace-pre-wrap p-4">
-              {splitOnCommas(promptText).map((segment) => (
-                <div>{segment}</div>
+            <div className="overflow-y-auto h-full whitespace-pre-wrap p-4">
+              {splitOnCommas(promptText).map((segment, idx) => (
+                <div key={`segment-${idx}`}>{segment}</div>
               ))}
             </div>
           </Paper>

diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -1,15 +1,20 @@
-import MonacoEditor, { EditorProps } from '@monaco-editor/react';
+import MonacoEditor, { EditorProps, useMonaco } from '@monaco-editor/react';
 import _ from 'lodash';
 
 const DEFAULT_OPTIONS: EditorProps = {
   theme: 'vs-dark',
-  options: { minimap: { enabled: false }, wordWrap: 'wordWrapColumn' },
+  options: {
+    padding: { top: 16 },
+    minimap: { enabled: false },
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    wordWrap: 'wordWrapColumn',
+  },
   language: 'sdprompt',
 };
 
 export function Editor(props: EditorProps = {}) {
   const withDefaults = _.merge({}, DEFAULT_OPTIONS, props);
-
   return (
     <>
       <MonacoEditor {...withDefaults}></MonacoEditor>

diff --git a/src/index.css b/src/index.css
@@ -13,8 +13,6 @@ body {
 }
 
 #root {
-  display: grid;
-  grid-template: 1fr / 1fr;
   height: 100%;
   min-height: 100%;
 }