From 47e6504c1448ce154e33b9404485d1eba7e77449 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 7 Sep 2021 16:02:11 +0100
Subject: [PATCH 01/12] Add preview device selection buttons and pass device
 preview down to client app

---
 .../src/builderStore/store/frontend.js        |  7 ++++++
 .../AppPreview/CurrentItemPreview.svelte      | 22 ++++++++++++++++++-
 .../AppPreview/DevicePreviewSelect.svelte     | 22 +++++++++++++++++++
 .../design/AppPreview/iframeTemplate.js       |  4 +++-
 .../design/[assetType]/_layout.svelte         |  3 +++
 5 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 7d0b9d0547..8189a28250 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -56,6 +56,7 @@ const INITIAL_FRONTEND_STATE = {
   clientLibPath: "",
   theme: "",
   customTheme: {},
+  previewDevice: "desktop",
 }
 
 export const getFrontendStore = () => {
@@ -230,6 +231,12 @@ export const getFrontendStore = () => {
           await store.actions.layouts.save(selectedAsset)
         }
       },
+      setDevice: device => {
+        store.update(state => {
+          state.previewDevice = device
+          return state
+        })
+      },
     },
     layouts: {
       select: layoutId => {
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 85fb086b59..e646fb86e9 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -50,6 +50,7 @@
     previewType: $store.currentFrontEndType,
     theme: $store.theme,
     customTheme: $store.customTheme,
+    previewDevice: $store.previewDevice,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -140,11 +141,12 @@
     </div>
   {/if}
   <iframe
-    style="height: 100%; width: 100%"
     title="componentPreview"
     bind:this={iframe}
     srcdoc={template}
     class:hidden={loading || error}
+    class:tablet={$store.previewDevice === "tablet"}
+    class:mobile={$store.previewDevice === "mobile"}
   />
 </div>
 <ConfirmDialog
@@ -160,6 +162,8 @@
   .component-container {
     grid-row-start: middle;
     grid-column-start: middle;
+    display: grid;
+    place-items: center;
     position: relative;
     overflow: hidden;
     margin: auto;
@@ -200,4 +204,20 @@
     font-weight: 400;
     margin: 0;
   }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+  /*iframe.tablet {*/
+  /*  width: 1024px;*/
+  /*  height: 768px;*/
+  /*}*/
+  /*iframe.mobile {*/
+  /*  width: calc(390px + 16px);*/
+  /*  height: calc(844px + 16px);*/
+  /*}*/
+  /*iframe.mobile :global(#spectrum-root) {*/
+  /*  border-radius: 12px;*/
+  /*}*/
 </style>
diff --git a/packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte b/packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte
new file mode 100644
index 0000000000..9f9447daee
--- /dev/null
+++ b/packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { ActionGroup, ActionButton } from "@budibase/bbui"
+  import { store } from "builderStore"
+</script>
+
+<ActionGroup compact>
+  <ActionButton
+    icon="DeviceDesktop"
+    selected={$store.previewDevice === "desktop"}
+    on:click={() => store.actions.preview.setDevice("desktop")}
+  />
+  <ActionButton
+    icon="DeviceTablet"
+    selected={$store.previewDevice === "tablet"}
+    on:click={() => store.actions.preview.setDevice("tablet")}
+  />
+  <ActionButton
+    icon="DevicePhone"
+    selected={$store.previewDevice === "mobile"}
+    on:click={() => store.actions.preview.setDevice("mobile")}
+  />
+</ActionGroup>
diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index 85f008df08..97f3c472e1 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -67,7 +67,8 @@ export default `
           previewType,
           appId,
           theme,
-          customTheme
+          customTheme,
+          previewDevice
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -80,6 +81,7 @@ export default `
         window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
         window["##BUDIBASE_PREVIEW_THEME##"] = theme
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
+        window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
 
         // Initialise app
         try {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index fb9cdf885c..ac9bf7e700 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -15,6 +15,7 @@
   import { get } from "svelte/store"
   import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
   import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
+  import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -151,6 +152,7 @@
     {#if $currentAsset}
       <div class="preview-header">
         <ComponentSelectionList />
+        <DevicePreviewSelect />
         {#if $store.clientFeatures.customThemes}
           <ThemeEditor />
         {:else if $store.clientFeatures.spectrumThemes}
@@ -209,6 +211,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: 1rem;
   }
   .preview-header > :global(*) {
     flex: 0 0 auto;

From dea0b02a1fb6507b3defcaab03a8e910220fc5f9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 7 Sep 2021 16:02:47 +0100
Subject: [PATCH 02/12] Leave builder preview always the same size and depend
 on app to resize itself

---
 .../design/AppPreview/CurrentItemPreview.svelte       | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index e646fb86e9..494050f690 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -209,15 +209,4 @@
     width: 100%;
     height: 100%;
   }
-  /*iframe.tablet {*/
-  /*  width: 1024px;*/
-  /*  height: 768px;*/
-  /*}*/
-  /*iframe.mobile {*/
-  /*  width: calc(390px + 16px);*/
-  /*  height: calc(844px + 16px);*/
-  /*}*/
-  /*iframe.mobile :global(#spectrum-root) {*/
-  /*  border-radius: 12px;*/
-  /*}*/
 </style>

From 749a26c5c5d917d9bb1feb55928c7ad39799a1dd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:39:36 +0100
Subject: [PATCH 03/12] Remove box shadow and padding around preview html
 element

---
 .../src/components/design/AppPreview/iframeTemplate.js    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index 97f3c472e1..d992be8cd7 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -17,18 +17,14 @@ export default `
         margin: 0;
       }
       html {
-        height: calc(100% - 16px);
-        width: calc(100% - 16px);
+        height: 100%;
+        width: 100%;
         overflow: hidden;
-        margin: 8px;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
       }
-      html.loaded {
-        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
-      }
       body {
         flex: 1 1 auto;
         overflow: hidden;

From 802cdc48c86ea38103289a69886d659ab8502fca Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:40:02 +0100
Subject: [PATCH 04/12] Update position of indicators in preview to clip better

---
 .../src/components/preview/Indicator.svelte   | 22 +++++++++++++------
 .../components/preview/IndicatorSet.svelte    | 11 +++++++---
 .../src/components/preview/SettingsBar.svelte |  9 ++++++++
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index fb1b5f320f..95364d0278 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -18,10 +18,11 @@
   }}
   out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
+  class:flipped={top < 20}
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped={top < 22}>
+    <div class="text" class:flipped={top < 20}>
       {text}
     </div>
   {/if}
@@ -29,11 +30,17 @@
 
 <style>
   .indicator {
-    position: fixed;
+    position: absolute;
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .indicator.flipped {
+    border-top-left-radius: 4px;
   }
   .text {
     background-color: var(--color);
@@ -45,16 +52,17 @@
     padding: 0 8px 2px 8px;
     transform: translateY(-100%);
     font-size: 11px;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
     white-space: nowrap;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .flipped {
+  .text.flipped {
+    border-top-left-radius: 4px;
     transform: translateY(0%);
     top: -2px;
   }
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 874631f782..957c7d7bef 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -70,17 +70,22 @@
       updating = false
     }
 
+    const device = document.getElementById("app-root")
+    const deviceBounds = device.getBoundingClientRect()
     children.forEach((child, idx) => {
       const callback = createIntersectionCallback(idx)
       const threshold = children.length > 1 ? 1 : 0
-      const observer = new IntersectionObserver(callback, { threshold })
+      const observer = new IntersectionObserver(callback, {
+        threshold,
+        root: device,
+      })
       observer.observe(child)
       observers.push(observer)
 
       const elBounds = child.getBoundingClientRect()
       nextIndicators.push({
-        top: elBounds.top + scrollY - 2,
-        left: elBounds.left + scrollX - 2,
+        top: elBounds.top + scrollY - deviceBounds.top,
+        left: elBounds.left + scrollX - deviceBounds.left,
         width: elBounds.width + 4,
         height: elBounds.height + 4,
         visible: false,
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index bc4f93acda..8d268eb32e 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -26,8 +26,10 @@
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
     const element = parent?.childNodes?.[0]
+    const device = document.getElementById("device-root")
     if (element && self) {
       // Batch reads to minimize reflow
+      const deviceBounds = device.getBoundingClientRect()
       const elBounds = element.getBoundingClientRect()
       const width = self.offsetWidth
       const height = self.offsetHeight
@@ -35,9 +37,16 @@
 
       // Vertically, always render above unless no room, then render inside
       let newTop = elBounds.top + scrollY - verticalOffset - height
+      if (newTop < deviceBounds.top - 50) {
+        newTop = deviceBounds.top - 50
+      }
       if (newTop < 0) {
         newTop = 0
       }
+      const deviceBottom = deviceBounds.top + deviceBounds.height
+      if (newTop > deviceBottom - 44) {
+        newTop = deviceBottom - 44
+      }
 
       // Horizontally, try to center first.
       // Failing that, render to left edge of component.

From 35abb39b247a3bf0ebe90d794271c6a2f2fb93c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:40:25 +0100
Subject: [PATCH 05/12] Add support for correct mobile and tablet previews

---
 .../client/src/components/ClientApp.svelte    |  91 ++++++---
 .../client/src/components/app/Layout.svelte   | 178 +++++++++---------
 .../context/DeviceBindingsProvider.svelte     |   2 +-
 packages/client/src/index.js                  |   1 +
 packages/client/src/stores/builder.js         |   3 +
 5 files changed, 163 insertions(+), 112 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 3a704e36a2..0d0d847c27 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -85,30 +85,45 @@
       <UserBindingsProvider>
         <DeviceBindingsProvider>
           <StateBindingsProvider>
-            <CustomThemeWrapper>
-              <div id="app-root" class:preview={$builderStore.inBuilder}>
-                {#key $screenStore.activeLayout._id}
-                  <Component instance={$screenStore.activeLayout.props} />
-                {/key}
-              </div>
-            </CustomThemeWrapper>
-            <NotificationDisplay />
-            <ConfirmationDisplay />
-            <PeekScreenDisplay />
+            <!-- Settings bar can be rendered outside of device preview -->
             <!-- Key block needs to be outside the if statement or it breaks -->
             {#key $builderStore.selectedComponentId}
               {#if $builderStore.inBuilder}
                 <SettingsBar />
               {/if}
             {/key}
-            <!--
+
+            <!-- Device boundary -->
+            <div
+              id="device-root"
+              class:preview={$builderStore.inBuilder}
+              class:tablet-preview={$builderStore.previewDevice === "tablet"}
+              class:mobile-preview={$builderStore.previewDevice === "mobile"}
+            >
+              <!-- Actual app -->
+              <div id="app-root">
+                <CustomThemeWrapper>
+                  {#key $screenStore.activeLayout._id}
+                    <Component instance={$screenStore.activeLayout.props} />
+                  {/key}
+
+                  <!-- Layers on top of app -->
+                  <NotificationDisplay />
+                  <ConfirmationDisplay />
+                  <PeekScreenDisplay />
+                </CustomThemeWrapper>
+              </div>
+
+              <!-- Selection indicators should be bounded by device -->
+              <!--
                 We don't want to key these by componentID as they control their own
                 re-mounting to avoid flashes.
               -->
-            {#if $builderStore.inBuilder}
-              <SelectionIndicator />
-              <HoverIndicator />
-            {/if}
+              {#if $builderStore.inBuilder}
+                <SelectionIndicator />
+                <HoverIndicator />
+              {/if}
+            </div>
           </StateBindingsProvider>
         </DeviceBindingsProvider>
       </UserBindingsProvider>
@@ -117,20 +132,33 @@
 {/if}
 
 <style>
-  #spectrum-root,
-  #app-root {
-    height: 100%;
-    width: 100%;
+  #spectrum-root {
     padding: 0;
     margin: 0;
     overflow: hidden;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  #device-root {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: transparent;
   }
   #app-root {
-    position: relative;
-  }
-  #app-root.preview {
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
   }
+
   .error {
     position: absolute;
     width: 100%;
@@ -157,4 +185,21 @@
   .error :global(h1) {
     font-weight: 400;
   }
+
+  /* Preview styles */
+  #device-root.preview {
+    padding: 2px;
+  }
+  #device-root.tablet-preview {
+    width: calc(1024px + 8px);
+    height: calc(768px + 8px);
+  }
+  #device-root.mobile-preview {
+    width: calc(390px + 8px);
+    height: calc(844px + 8px);
+  }
+  .preview #app-root {
+    border: 2px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+  }
 </style>
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 7f120556bd..2c7f1ad45a 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -5,6 +5,7 @@
 
   const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
   const component = getContext("component")
+  const context = getContext("context")
 
   export let title
   export let hideTitle = false
@@ -58,7 +59,12 @@
   }
 </script>
 
-<div class="layout layout--{typeClass}" use:styleable={$component.styles}>
+<div
+  class="layout layout--{typeClass}"
+  use:styleable={$component.styles}
+  class:desktop={!$context.device.mobile && !$context.device.tablet}
+  class:mobile={!!$context.device.mobile}
+>
   {#if typeClass !== "none"}
     <div class="nav-wrapper" class:sticky class:hidden={isPeeking}>
       <div class="nav nav--{typeClass} size--{widthClass}">
@@ -286,101 +292,97 @@
   }
 
   /* Desktop nav overrides */
-  @media (min-width: 600px) {
-    .layout--left {
-      flex-direction: row;
-      overflow: hidden;
-    }
-    .layout--left .main-wrapper {
-      height: 100%;
-      overflow: auto;
-    }
+  .desktop.layout--left {
+    flex-direction: row;
+    overflow: hidden;
+  }
+  .desktop.layout--left .main-wrapper {
+    height: 100%;
+    overflow: auto;
+  }
 
-    .nav--left {
-      width: 250px;
-      padding: var(--spacing-xl);
-    }
+  .desktop .nav--left {
+    width: 250px;
+    padding: var(--spacing-xl);
+  }
 
-    .nav--left .links {
-      margin-top: var(--spacing-m);
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: stretch;
-    }
-    .nav--left .link {
-      font-size: var(--spectrum-global-dimension-font-size-150);
-    }
+  .desktop .nav--left .links {
+    margin-top: var(--spacing-m);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .desktop .nav--left .link {
+    font-size: var(--spectrum-global-dimension-font-size-150);
   }
 
   /* Mobile nav overrides */
-  @media (max-width: 600px) {
-    .nav-wrapper {
-      position: sticky;
-      top: 0;
-      left: 0;
-      box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
-    }
+  .mobile .nav-wrapper {
+    position: sticky;
+    top: 0;
+    left: 0;
+    box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
+  }
 
-    /* Show close button in drawer */
-    .close {
-      display: block;
-    }
+  /* Show close button in drawer */
+  .mobile .close {
+    display: block;
+  }
 
-    /* Force standard top bar */
-    .nav {
-      padding: var(--spacing-m) 16px;
-    }
-    .burger {
-      display: grid;
-      place-items: center;
-    }
-    .logo {
-      flex: 0 0 auto;
-    }
-    .logo :global(h1) {
-      display: none;
-    }
+  /* Force standard top bar */
+  .mobile .nav {
+    padding: var(--spacing-m) 16px;
+  }
+  .mobile .burger {
+    display: grid;
+    place-items: center;
+  }
+  .mobile .logo {
+    flex: 0 0 auto;
+  }
+  .mobile .logo :global(h1) {
+    display: none;
+  }
 
-    /* Reduce padding */
-    .main {
-      padding: 16px;
-    }
+  /* Reduce padding */
+  .mobile .main {
+    padding: 16px;
+  }
 
-    /* Transform links into drawer */
-    .links {
-      margin-top: 0;
-      position: fixed;
-      top: 0;
-      left: -250px;
-      transform: translateX(0);
-      width: 250px;
-      transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
-      height: 100vh;
-      opacity: 0;
-      background: var(--navBackground);
-      z-index: 999;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: stretch;
-      padding: var(--spacing-xl);
-    }
-    .link {
-      width: calc(100% - 30px);
-      font-size: 120%;
-    }
-    .links.visible {
-      opacity: 1;
-      transform: translateX(250px);
-      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3);
-    }
-    .mobile-click-handler.visible {
-      position: fixed;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      z-index: 998;
-    }
+  /* Transform links into drawer */
+  .mobile .links {
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    left: -250px;
+    transform: translateX(0);
+    width: 250px;
+    transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
+    height: 100vh;
+    opacity: 0;
+    background: var(--navBackground);
+    z-index: 999;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-xl);
+  }
+  .mobile .link {
+    width: calc(100% - 30px);
+    font-size: 120%;
+  }
+  .mobile .links.visible {
+    opacity: 1;
+    transform: translateX(250px);
+    box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.3);
+  }
+  .mobile .mobile-click-handler.visible {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 998;
   }
 </style>
diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 864068cd17..4df3f874c3 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/context/DeviceBindingsProvider.svelte
@@ -17,7 +17,7 @@
   }
 
   onMount(() => {
-    const doc = document.documentElement
+    const doc = document.getElementById("device-root")
     resizeObserver.observe(doc)
 
     return () => {
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 2d1c9fd1c0..1acf25f21d 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -18,6 +18,7 @@ const loadBudibase = () => {
     previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
+    previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 6b7d4cb88e..3f36af1d06 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -20,6 +20,9 @@ const createBuilderStore = () => {
     previewId: null,
     previewType: null,
     selectedPath: [],
+    theme: null,
+    customTheme: null,
+    previewDevice: "desktop",
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {

From c5cd2fb64a4cc083175cf33c3c8155851d804df2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:46:20 +0100
Subject: [PATCH 06/12] Add feature flag to determine support for previewing on
 different device sizes

---
 packages/builder/src/builderStore/store/frontend.js           | 1 +
 .../app/[application]/design/[assetType]/_layout.svelte       | 4 +++-
 packages/client/manifest.json                                 | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 8189a28250..603fa88b09 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -43,6 +43,7 @@ const INITIAL_FRONTEND_STATE = {
     deviceAwareness: false,
     state: false,
     customThemes: false,
+    devicePreview: false,
   },
   currentFrontEndType: "none",
   selectedScreenId: "",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index ac9bf7e700..21b93a5624 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -152,7 +152,9 @@
     {#if $currentAsset}
       <div class="preview-header">
         <ComponentSelectionList />
-        <DevicePreviewSelect />
+        {#if $store.clientFeatures.devicePreview}
+          <DevicePreviewSelect />
+        {/if}
         {#if $store.clientFeatures.customThemes}
           <ThemeEditor />
         {:else if $store.clientFeatures.spectrumThemes}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 51ae1cf30d..34748be3b5 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4,7 +4,8 @@
     "intelligentLoading": true,
     "deviceAwareness": true,
     "state": true,
-    "customThemes": true
+    "customThemes": true,
+    "devicePreview": true
   },
   "layout": {
     "name": "Layout",

From 914548de0ca3feed2adebcffdd125d65e175cb64 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:51:08 +0100
Subject: [PATCH 07/12] Revert preview border to 1px and fix exact size of
 preview on different devices

---
 packages/client/src/components/ClientApp.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 0d0d847c27..63b5241168 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -187,19 +187,20 @@
   }
 
   /* Preview styles */
+  /* The additional 6px of size is to account for 4px padding and 2px border */
   #device-root.preview {
     padding: 2px;
   }
   #device-root.tablet-preview {
-    width: calc(1024px + 8px);
-    height: calc(768px + 8px);
+    width: calc(1024px + 6px);
+    height: calc(768px + 6px);
   }
   #device-root.mobile-preview {
-    width: calc(390px + 8px);
-    height: calc(844px + 8px);
+    width: calc(390px + 6px);
+    height: calc(844px + 6px);
   }
   .preview #app-root {
-    border: 2px solid var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
   }
 </style>

From 87f3659ba48a7cb33a138aff09b82f5c74c191ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 09:54:10 +0100
Subject: [PATCH 08/12] Align component selection list and preview controls to
 top of center panel

---
 .../design/AppPreview/ComponentSelectionList.svelte          | 5 +++--
 .../app/[application]/design/[assetType]/_layout.svelte      | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 9893b07404..a968effaf5 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -83,10 +83,11 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    margin-top: -10px;
   }
   .components :global(> *) {
-    margin-top: 10px;
+    height: 32px;
+    display: grid;
+    place-items: center;
   }
 
   .buttonContent {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index 21b93a5624..d3e5d5d2d0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -212,7 +212,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     gap: 1rem;
   }
   .preview-header > :global(*) {

From 079634851b3c301129342da57eff10940fc966f2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 10:22:34 +0100
Subject: [PATCH 09/12] Fix issue with endless scrolling when previewing a
 mobile device

---
 packages/client/src/components/app/Layout.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 2c7f1ad45a..09d9376a0b 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -66,7 +66,12 @@
   class:mobile={!!$context.device.mobile}
 >
   {#if typeClass !== "none"}
-    <div class="nav-wrapper" class:sticky class:hidden={isPeeking}>
+    <div
+      class="nav-wrapper"
+      class:sticky
+      class:hidden={isPeeking}
+      style={`--height:${$context.device.height}px; --width:${$context.device.width}px;`}
+    >
       <div class="nav nav--{typeClass} size--{widthClass}">
         <div class="nav-header">
           {#if validLinks?.length}
@@ -358,7 +363,7 @@
     transform: translateX(0);
     width: 250px;
     transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
-    height: 100vh;
+    height: var(--height);
     opacity: 0;
     background: var(--navBackground);
     z-index: 999;
@@ -381,8 +386,8 @@
     display: block;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: var(--width);
+    height: var(--height);
     z-index: 998;
   }
 </style>

From 3be5e15f822033ad8f8ba89c866a04290d4b28f7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 10:22:48 +0100
Subject: [PATCH 10/12] Use correct component to determine device size

---
 .../src/components/context/DeviceBindingsProvider.svelte    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 4df3f874c3..a6dc64fe74 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/context/DeviceBindingsProvider.svelte
@@ -3,21 +3,25 @@
   import { onMount } from "svelte"
 
   let width = window.innerWidth
+  let height = window.innerHeight
   const tabletBreakpoint = 768
   const desktopBreakpoint = 1280
   const resizeObserver = new ResizeObserver(entries => {
     if (entries?.[0]) {
       width = entries[0].contentRect?.width
+      height = entries[0].contentRect?.height
     }
   })
 
   $: data = {
     mobile: width && width < tabletBreakpoint,
     tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
+    width,
+    height,
   }
 
   onMount(() => {
-    const doc = document.getElementById("device-root")
+    const doc = document.getElementById("app-root")
     resizeObserver.observe(doc)
 
     return () => {

From 11e728a3737bd02df4e3886178ef2589b9bc61df Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 10:28:19 +0100
Subject: [PATCH 11/12] Rename client app wrapper divs for clarity

---
 packages/client/src/components/ClientApp.svelte      | 12 ++++++------
 .../client/src/components/preview/SettingsBar.svelte |  8 +++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 63b5241168..5890c0e2a9 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -93,9 +93,9 @@
               {/if}
             {/key}
 
-            <!-- Device boundary -->
+            <!-- Clip boundary for selection indicators -->
             <div
-              id="device-root"
+              id="clip-root"
               class:preview={$builderStore.inBuilder}
               class:tablet-preview={$builderStore.previewDevice === "tablet"}
               class:mobile-preview={$builderStore.previewDevice === "mobile"}
@@ -144,7 +144,7 @@
     justify-content: center;
     align-items: center;
   }
-  #device-root {
+  #clip-root {
     max-width: 100%;
     max-height: 100%;
     width: 100%;
@@ -188,14 +188,14 @@
 
   /* Preview styles */
   /* The additional 6px of size is to account for 4px padding and 2px border */
-  #device-root.preview {
+  #clip-root.preview {
     padding: 2px;
   }
-  #device-root.tablet-preview {
+  #clip-root.tablet-preview {
     width: calc(1024px + 6px);
     height: calc(768px + 6px);
   }
-  #device-root.mobile-preview {
+  #clip-root.mobile-preview {
     width: calc(390px + 6px);
     height: calc(844px + 6px);
   }
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 8d268eb32e..3581d4f5f8 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -26,7 +26,13 @@
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
     const element = parent?.childNodes?.[0]
-    const device = document.getElementById("device-root")
+
+    // The settings bar is higher in the dom tree than the selection indicators
+    // as we want to be able to render the settings bar wider than the screen,
+    // or outside the screen.
+    // Therefore we use the clip root rather than the app root to determine
+    // its position.
+    const device = document.getElementById("clip-root")
     if (element && self) {
       // Batch reads to minimize reflow
       const deviceBounds = device.getBoundingClientRect()

From 40e7b57d273bd8c33a55f27d0655a4b2ddb4d200 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 9 Sep 2021 11:55:46 +0100
Subject: [PATCH 12/12] Add meta tag to client apps to ensure they stretch to
 fill ios device screens

---
 .../src/api/controllers/static/templates/BudibaseApp.svelte  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 4943051328..761e953ff7 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -7,7 +7,10 @@
 
 <svelte:head>
   <meta charset="utf8" />
-  <meta name="viewport" content="width=device-width" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+  />
 
   <title>{title}</title>
   <link rel="icon" type="image/png" href={favicon} />