diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs
index 2b43b800bb1..ae24ae46718 100644
--- a/sites/shared/components/workbench/header.mjs
+++ b/sites/shared/components/workbench/header.mjs
@@ -142,18 +142,17 @@ const NavIcons = ({ setModal, setView, setDense, dense, view }) => {
 export const WorkbenchHeader = ({ view, setView, update }) => {
   const { setModal } = useContext(ModalContext)
   const [dense, setDense] = useState(true)
+  //${dense ? '' : 'translate-x-52'}
 
   return (
     <header
       className={`
-      hidden lg:block lg:fixed lg:top-0 lg:left-0
+      hidden lg:block
       bg-neutral
-      w-64 h-screen
-      z-10
-      transition-transform
+      w-64 min-h-screen pt-4
+      transition-all
       drop-shadow-xl
-      pt-28
-      ${dense ? '-translate-x-52' : ''}
+      ${dense ? '-ml-52' : 'ml-0'}
     `}
     >
       <div className="hidden lg:flex lg:flex-col lg:justify-between items-center w-full">
diff --git a/sites/shared/components/workbench/index.mjs b/sites/shared/components/workbench/index.mjs
index 18f6063b33e..67c771125c1 100644
--- a/sites/shared/components/workbench/index.mjs
+++ b/sites/shared/components/workbench/index.mjs
@@ -145,9 +145,11 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) =
   }
 
   return (
-    <>
-      <WorkbenchHeader {...{ view, setView, update }} />
-      {viewContent}
-    </>
+    <div className="flex flex-row">
+      <div className="grow-no shrink-no">
+        <WorkbenchHeader {...{ view, setView, update }} />
+      </div>
+      <div className="grow">{viewContent}</div>
+    </div>
   )
 }