From fb9dd20c114e05e237e52b0fe9d9eba25d2b88a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 10 Nov 2022 14:34:23 +0000
Subject: [PATCH] Update side panel styles and ensure side panel properly
 reveals itself in the builder

---
 packages/client/src/components/Component.svelte    |  1 +
 packages/client/src/components/app/Layout.svelte   | 10 ++++++----
 .../client/src/components/app/SidePanel.svelte     | 14 +++++++++-----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b98548fc9c..8a72fb042a 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -188,6 +188,7 @@
     },
     empty: emptyState,
     selected,
+    inSelectedPath,
     name,
     editing,
     type: instance._component,
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index d1e55df5b5..eb6e922a1f 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -336,16 +336,18 @@
   }
 
   #side-panel-container {
-    flex: 0 0 360px;
-    background: var(--background);
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    flex: 0 0 400px;
+    max-width: calc(100vw - 40px);
+    background: var(--spectrum-global-color-gray-50);
     transition: margin-right 130ms ease-out;
     z-index: 3;
     padding: var(--spacing-xl);
-    margin-right: -370px;
+    margin-right: -410px;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xl);
+    overflow-y: auto;
+    border-left: 1px solid var(--spectrum-global-color-gray-300);
   }
   #side-panel-container.open {
     margin-right: 0;
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index 2e03ca6d3d..655b3d5d3b 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@@ -2,9 +2,11 @@
   import { getContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable, sidePanelStore } = getContext("sdk")
+  const { styleable, sidePanelStore, builderStore } = getContext("sdk")
 
-  $: open = $sidePanelStore.contentId === $component.id
+  $: appOpen = $sidePanelStore.contentId === $component.id
+  $: builderOpen = $component.inSelectedPath
+  $: open = $builderStore.inBuilder ? builderOpen : appOpen
 
   const showInSidePanel = (el, visible) => {
     const target = document.getElementById("side-panel-container")
@@ -13,9 +15,11 @@
     }
     const update = visible => {
       if (visible) {
+        sidePanelStore.actions.open($component.id)
         target.appendChild(el)
         el.hidden = false
       } else {
+        sidePanelStore.actions.close()
         destroy()
         el.hidden = true
       }
@@ -40,9 +44,9 @@
   <slot />
 </div>
 <div>
-  <button on:click={() => sidePanelStore.actions.open($component.id)}
-    >open</button
-  >
+  <button on:click={() => sidePanelStore.actions.open($component.id)}>
+    open
+  </button>
   <button on:click={sidePanelStore.actions.close}>close</button>
 </div>