From 302e001eb586401efae114cadd5f0dd6d06baf3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 20 May 2021 16:46:20 +0200
Subject: [PATCH] workaround to strange onMount bug with many Tabs components

---
 .../portal/manage/email/[template].svelte     | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
index d48ba576d1..1ecaea693c 100644
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import {
     Button,
     Detail,
@@ -19,6 +20,7 @@
   export let template
 
   let htmlEditor
+  let mounted = false
 
   $: selectedTemplate = $email?.templates?.find(
     ({ purpose }) => purpose === template
@@ -39,6 +41,9 @@
   function setTemplateBinding(binding) {
     htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`))
   }
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
 <Page wide>
@@ -78,22 +83,24 @@
         />
         <div class="bindings-editor">
           <Detail size="L">Bindings</Detail>
-          <Tabs selected="Template">
-            <Tab title="Template">
-              <TemplateBindings
-                title="Template Bindings"
-                bindings={templateBindings}
-                onBindingClick={setTemplateBinding}
-              />
-            </Tab>
-            <Tab title="Common">
-              <TemplateBindings
-                title="Common Bindings"
-                bindings={$email?.definitions?.bindings?.common}
-                onBindingClick={setTemplateBinding}
-              />
-            </Tab>
-          </Tabs>
+          {#if mounted}
+            <Tabs selected="Template">
+              <Tab title="Template">
+                <TemplateBindings
+                  title="Template Bindings"
+                  bindings={templateBindings}
+                  onBindingClick={setTemplateBinding}
+                />
+              </Tab>
+              <Tab title="Common">
+                <TemplateBindings
+                  title="Common Bindings"
+                  bindings={$email?.definitions?.bindings?.common}
+                  onBindingClick={setTemplateBinding}
+                />
+              </Tab>
+            </Tabs>
+          {/if}
         </div>
       </div></Tab
     >
@@ -108,7 +115,7 @@
 <style>
   .template-editor {
     display: grid;
-    grid-template-columns: 1fr 20%;
+    grid-template-columns: 1fr minmax(250px, 20%);
     grid-gap: var(--spacing-xl);
     margin-top: var(--spacing-xl);
   }