Update side panel transition to be much smoother

packages/client/src/components/app/Layout.svelte

@@ -356,21 +356,21 @@
     flex-direction: column;
     gap: 30px;
     overflow-y: auto;
-    transition: margin-right 130ms ease-out;
+    transition: transform 130ms ease-out;
     position: absolute;
     width: 400px;
     right: 0;
-    margin-right: -400px;
+    transform: translateX(100%);
     height: 100%;
   }
   #side-panel-container.builder {
-    margin-right: 0;
+    transform: translateX(0);
     opacity: 0;
     pointer-events: none;
   }
   #side-panel-container.open {
+    transform: translateX(0);
     box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
-    margin-right: 0;
   }
   #side-panel-container.builder.open {
     opacity: 1;

packages/client/src/components/app/SidePanel.svelte

@@ -1,13 +1,10 @@
 <script>
-  import { getContext, onDestroy } from "svelte"
+  import { getContext } from "svelte"
 
   const component = getContext("component")
   const { styleable, sidePanelStore, builderStore, dndIsDragging } =
     getContext("sdk")
 
-  let renderContent = false
-  let contentTimeout
-
   // Automatically show and hide the side panel when inside the builder.
   // For some unknown reason, svelte reactivity breaks if we reference the
   // reactive variable "open" inside the following expression, or if we define
@@ -32,18 +29,6 @@
   // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
-  // When we hide the side panel we want to kick off a short timeout which will
-  // eventually hide the content. We don't do this immediately as this causes
-  // things like cycling through a table to constantly remount the side panel
-  // contents.
-  $: updateContentVisibility(open)
-  const updateContentVisibility = open => {
-    clearTimeout(contentTimeout)
-    contentTimeout = setTimeout(() => {
-      renderContent = open
-    }, 130)
-  }
-
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -64,10 +49,6 @@
 
     return { update }
   }
-
-  onDestroy(() => {
-    clearTimeout(contentTimeout)
-  })
 </script>
 
 <div
@@ -76,9 +57,7 @@
   class="side-panel"
   class:open
 >
-  {#if renderContent}
+  <slot />
-    <slot />
-  {/if}
 </div>
 
 <style>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -44,7 +44,7 @@
   $: editTitle = getEditTitle(detailsFormBlockId, primaryDisplay)
   $: normalFields = getNormalFields(schema)
   $: rowClickActions =
-    clickBehaviour === "actions"
+    clickBehaviour === "actions" || dataSource?.type !== "table"
       ? onClick
       : [
           {
@@ -66,7 +66,7 @@
           },
         ]
   $: buttonClickActions =
-    titleButtonClickBehaviour === "actions"
+    clickBehaviour === "actions" || dataSource?.type !== "table"
       ? onClickTitleButton
       : [
           {
@@ -108,7 +108,8 @@
       return "Edit"
     }
     const prefix = safe(detailsFormBlockId + "-repeater")
-    return `{{ ${prefix}.${safe(primaryDisplay)} }}`
+    const binding = `${prefix}.${safe(primaryDisplay)}`
+    return `{{#if ${binding}}}{{${binding}}}{{else}}Details{{/if}}`
   }
 </script>