Tweak update button position and visibility in component editor

mui · Jul 21, 2022 · dd0a79a · dd0a79a
1 parent 962599d
commit dd0a79a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 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,7 +151,7 @@ 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>
         <Box flex={1}>
@@ -165,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(
@@ -184,21 +193,6 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
             frameDocument.body,
           )
         : null}
-      <Toolbar
-        sx={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          width: '100%',
-          zIndex: 1,
-          background: '#f2f2f2',
-          justifyContent: 'end',
-        }}
-      >
-        <Button disabled={allChangesAreCommitted} onClick={handleSave} variant="contained">
-          Update
-        </Button>
-      </Toolbar>
     </React.Fragment>
   );
 }