Tweak update button position and visibility in component editor (#673)

* Tweak update button position and visibility in component editor * Tweak update button position and visibility in component editor Co-authored-by: Jan Potoms <[email protected]>
mui · Jul 25, 2022 · 3021c8c · 3021c8c
1 parent 0769516
commit 3021c8c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/toolpad-app/src/components/SplitPane.tsx b/packages/toolpad-app/src/components/SplitPane.tsx
@@ -38,6 +38,9 @@ const WrappedSplitPane = React.forwardRef<
       // Some sensible defaults
       minSize={20}
       maxSize={-20}
+      style={{
+        position: 'relative',
+      }}
       paneStyle={{
         display: 'block',
         // Prevent the content from stretching the Panel out

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/index.tsx
@@ -151,14 +151,9 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
   return (
     <React.Fragment>
       <Stack sx={{ height: '100%' }}>
-        <Toolbar sx={{ mt: 2 }}>
+        <Toolbar sx={{ mt: 2, mb: 2 }}>
           <NodeNameEditor node={codeComponentNode} sx={{ maxWidth: 300 }} />
         </Toolbar>
-        <Toolbar>
-          <Button disabled={allChangesAreCommitted} onClick={handleSave}>
-            Update
-          </Button>
-        </Toolbar>
         <Box flex={1}>
           <SplitPane split="vertical" allowResize size="50%">
             <TypescriptEditor
@@ -170,6 +165,15 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
             <CanvasFrame ref={frameRef} title="Code component sandbox" onLoad={onLoad} />
           </SplitPane>
         </Box>
+        <Toolbar
+          sx={{
+            justifyContent: 'end',
+          }}
+        >
+          <Button disabled={allChangesAreCommitted} onClick={handleSave} variant="contained">
+            Update
+          </Button>
+        </Toolbar>
       </Stack>
       {iframeLoaded && frameDocument
         ? ReactDOM.createPortal(