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 b8e5d4d1abd..9c76a9b2d9a 100644
--- 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>
   );
 }