From 1ecfd93c962b20c0df198ca12eed0d3e4b6fcc35 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 14 Sep 2021 12:32:04 +0100
Subject: [PATCH] Update config checklist to be mobile friendly

---
 .../components/common/ConfigChecklist.svelte  | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/ConfigChecklist.svelte b/packages/builder/src/components/common/ConfigChecklist.svelte
index 7914a78b65..05f3f7c719 100644
--- a/packages/builder/src/components/common/ConfigChecklist.svelte
+++ b/packages/builder/src/components/common/ConfigChecklist.svelte
@@ -8,9 +8,28 @@
   } from "@budibase/bbui"
   import { admin } from "stores/portal"
   import { goto } from "@roxi/routify"
+  import { onMount } from "svelte"
+
+  let width = window.innerWidth
+  $: side = width < 500 ? "right" : "left"
+
+  const resizeObserver = new ResizeObserver(entries => {
+    if (entries?.[0]) {
+      width = entries[0].contentRect?.width
+    }
+  })
+
+  onMount(() => {
+    const doc = document.documentElement
+    resizeObserver.observe(doc)
+
+    return () => {
+      resizeObserver.unobserve(doc)
+    }
+  })
 </script>
 
-<ActionMenu>
+<ActionMenu align={side}>
   <div slot="control" class="icon">
     <ProgressCircle size="S" value={$admin.onboardingProgress} />
   </div>
@@ -37,7 +56,7 @@
   .item {
     display: grid;
     align-items: center;
-    grid-template-columns: 200px 20px;
+    grid-template-columns: 175px 20px;
   }
   .icon {
     cursor: pointer;