From 3021c8cf37b4b6ed1bc7c20ee3aba8bde555cb07 Mon Sep 17 00:00:00 2001
From: Vytautas Butkus <vytautas.butkus@gmail.com>
Date: Mon, 25 Jul 2022 11:53:24 +0300
Subject: [PATCH] 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 <2109932+Janpot@users.noreply.github.com>
---
 .../toolpad-app/src/components/SplitPane.tsx     |  3 +++
 .../AppEditor/CodeComponentEditor/index.tsx      | 16 ++++++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/toolpad-app/src/components/SplitPane.tsx b/packages/toolpad-app/src/components/SplitPane.tsx
index 8a963e434a8..1174a66d87c 100644
--- 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
index df9cb5bc3b3..9c76a9b2d9a 100644
--- 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(