From 8e82a0efd9ae81a78dbb48d7eadc905c389ce68b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Jul 2021 18:16:37 +0100
Subject: [PATCH] Revert to a cleaner modal with no title or buttons for screen
 peeking

---
 .../NavigationPanel/NewLayoutModal.svelte     |  4 ++--
 .../src/components/PeekScreenDisplay.svelte   | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
index 0ed9014eac..403cce1f74 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
@@ -15,6 +15,6 @@
   }
 </script>
 
-<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
-  <Input thin label="Name" bind:value={name} />
+<ModalContent title="Create Layout" confirmText="Create" onConfirm="{save}">
+  <input thin label="Name" bind:value="{name}" />
 </ModalContent>
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index fc998f504a..566121209c 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -1,6 +1,6 @@
 <script>
   import { peekStore, dataSourceStore, routeStore } from "../store"
-  import { Modal, ModalContent, Button, Divider, Layout } from "@budibase/bbui"
+  import { Modal, ModalContent, Button } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
   let iframe
@@ -51,28 +51,30 @@
 {#if $peekStore.showPeek}
   <Modal fixed on:cancel={handleCancel}>
     <ModalContent
-      cancelText="Close"
+      showCancelButton={false}
       showConfirmButton={false}
       size="XL"
-      title="Screen Peek"
       showDivider={false}
+      showCloseIcon={false}
     >
       <iframe title="Peek" bind:this={iframe} src={$peekStore.href} />
-      <div slot="footer">
-        <Button secondary quiet on:click={navigate}>Full screen</Button>
-      </div>
     </ModalContent>
   </Modal>
 {/if}
 
 <style>
   iframe {
-    margin: 0 -40px;
+    margin: -40px;
     border: none;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    border-top: 1px solid var(--spectrum-global-color-gray-300);
     width: calc(100% + 80px);
     height: 640px;
     transition: width 1s ease, height 1s ease, top 1s ease, left 1s ease;
+    border-radius: var(--spectrum-global-dimension-size-100);
+  }
+
+  @media (max-width: 600px) {
+    iframe {
+      max-height: calc(100vh - 80px);
+    }
   }
 </style>