diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 48892b4fdc..104df1d500 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -251,6 +251,7 @@
     id="side-panel-container"
     class:open={$sidePanelStore.open}
     use:clickOutside={sidePanelStore.actions.close}
+    class:builder={$builderStore.inBuilder}
   >
     <div class="side-panel-header">
       <Icon
@@ -361,10 +362,19 @@
     margin-right: -400px;
     height: 100%;
   }
+  #side-panel-container.builder {
+    margin-right: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
   #side-panel-container.open {
     box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
     margin-right: 0;
   }
+  #side-panel-container.builder.open {
+    opacity: 1;
+    pointer-events: all;
+  }
   .side-panel-header {
     display: flex;
     flex-direction: row;
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index e1b515c5ac..81e4bad495 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@@ -4,9 +4,18 @@
   const component = getContext("component")
   const { styleable, sidePanelStore, builderStore } = getContext("sdk")
 
-  $: appOpen = $sidePanelStore.contentId === $component.id
-  $: builderOpen = $component.inSelectedPath
-  $: open = $builderStore.inBuilder ? builderOpen : appOpen
+  $: open = $sidePanelStore.contentId === $component.id
+
+  // Automatically show and hide the side panel when inside the builder
+  $: {
+    if ($builderStore.inBuilder) {
+      if ($component.inSelectedPath && !open) {
+        sidePanelStore.actions.open($component.id)
+      } else if (!$component.inSelectedPath && open) {
+        sidePanelStore.actions.close()
+      }
+    }
+  }
 
   const showInSidePanel = (el, visible) => {
     const target = document.getElementById("side-panel-container")