Add option to open app preview in new tab

packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte

@@ -15,6 +15,7 @@
   }
 
   onMount(() => {
+    window.isBuilder = true
     window.closePreview = () => {
       store.update(state => ({
         ...state,

packages/client/src/components/devtools/DevToolsHeader.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore } from "../../stores"
+  import { devToolsStore, appStore } from "../../stores"
   import { getContext } from "svelte"
 
   const context = getContext("context")
@@ -27,6 +27,8 @@
       value: "ADMIN",
     },
   ]
+
+  const isFullScreen = window.parent.isBuilder
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
@@ -45,27 +47,41 @@
       icon="Code"
       on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
     >
-      {$devToolsStore.visible ? "Close" : "Open"} DevTools
+      DevTools
     </ActionButton>
   {/if}
+  {#if window.parent.isBuilder}
+    <ActionButton
+      quiet
+      icon="LinkOut"
+      on:click={() => {
+        window.parent.closePreview?.()
+        window.open(`/${$appStore.appId}`, "_blank")
+      }}
+    >
+      Fullscreen
+    </ActionButton>
     <ActionButton
       quiet
       icon="Close"
       on:click={() => window.parent.closePreview?.()}
     >
-    Close preview
+      Close
     </ActionButton>
+  {/if}
 </div>
 
 <style>
   .dev-preview-header {
     flex: 0 0 60px;
-    display: grid;
-    align-items: center;
     background-color: black;
     padding: 0 var(--spacing-xl);
-    grid-template-columns: 1fr auto auto auto;
+    display: flex;
-    grid-gap: var(--spacing-xl);
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .dev-preview-header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
   }
   .dev-preview-header.mobile {
     grid-template-columns: 1fr auto auto;