Let experiment notes take up the whole page

Author: aliasaria

src/renderer/components/Experiment/ExperimentNotes.tsx

@@ -13,7 +13,7 @@ import remarkGfm from 'remark-gfm';
 
 import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
 import { PencilIcon } from 'lucide-react';
-import { Button, Typography } from '@mui/joy';
+import { Box, Button, Typography } from '@mui/joy';
 import fairyflossTheme from '../Shared/fairyfloss.tmTheme.js';
 
 const { parseTmTheme } = require('monaco-themes');
@@ -91,29 +91,40 @@ export default function ExperimentNotes({ experimentInfo }) {
   }
 
   return (
-    <Sheet>
+    <Sheet
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        mb: 3,
+      }}
+    >
       <Typography level="h1">Experiment Notes</Typography>
       {!isEditing && (
         <Sheet
           color="neutral"
           variant="outlined"
           sx={{
-            mt: 3,
-            minHeight: '300px',
-            minWidth: '600px',
+            display: 'flex',
+            flexDirection: 'column',
+            mt: 1,
+            height: '100%',
             p: 3,
             boxShadow:
               'rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px',
           }}
           className="editableSheet"
         >
           {!data && 'Write experiment notes here...'}
-          <Markdown
-            remarkPlugins={[remarkGfm]}
-            className="editableSheetContent"
-          >
-            {data}
-          </Markdown>
+          <Box display="flex" sx={{ width: '100%' }}>
+            <Markdown
+              remarkPlugins={[remarkGfm]}
+              className="editableSheetContent"
+            >
+              {data}
+            </Markdown>
+          </Box>
           <Button
             onClick={() => {
               setIsEditing(true);
@@ -122,8 +133,6 @@ export default function ExperimentNotes({ experimentInfo }) {
               mt: 1,
               ml: 'auto',
               position: 'absolute',
-              top: '30%',
-              left: '20%',
             }}
             variant="solid"
             className="hoverEditButton"
@@ -135,7 +144,14 @@ export default function ExperimentNotes({ experimentInfo }) {
       )}
 
       {isEditing && (
-        <>
+        <Sheet
+          sx={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
           <Typography mt={3}>
             Use{' '}
             <a
@@ -150,13 +166,15 @@ export default function ExperimentNotes({ experimentInfo }) {
             color="neutral"
             sx={{
               p: 3,
+              display: 'flex',
               backgroundColor: '#ddd',
+              height: '100%',
             }}
           >
             <Editor
-              height="600px"
               defaultLanguage="markdown"
               theme="my-theme"
+              height="100%"
               options={{
                 minimap: {
                   enabled: false,
@@ -168,22 +186,24 @@ export default function ExperimentNotes({ experimentInfo }) {
               onMount={handleEditorDidMount}
             />
           </Sheet>
-          <Button
-            onClick={() => {
-              saveValue();
-            }}
-            sx={{ mt: 1, ml: 'auto' }}
-          >
-            Save
-          </Button>
-          <Button
-            variant="soft"
-            sx={{ ml: '10px' }}
-            onClick={() => setIsEditing(false)}
-          >
-            Cancel
-          </Button>
-        </>
+          <Box display="flex" sx={{ width: '100%' }}>
+            <Button
+              onClick={() => {
+                saveValue();
+              }}
+              sx={{ mt: 1, ml: 'auto' }}
+            >
+              Save
+            </Button>
+            <Button
+              variant="soft"
+              sx={{ ml: '10px' }}
+              onClick={() => setIsEditing(false)}
+            >
+              Cancel
+            </Button>
+          </Box>
+        </Sheet>
       )}
     </Sheet>
   );