Darken modal underlay and add actions above screen modal to allow entering full screen or closing

packages/bbui/src/Modal/Modal.svelte

@@ -70,6 +70,7 @@
     >
       <div class="modal-wrapper" on:mousedown|self={cancel}>
         <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+          <slot name="outside" />
           <div
             use:focusFirstInput
             class="spectrum-Modal is-open"
@@ -93,6 +94,7 @@
     z-index: 999;
     overflow: auto;
     overflow-x: hidden;
+    background: rgba(0, 0, 0, 0.75);
   }
 
   .modal-wrapper {
@@ -112,6 +114,7 @@
     justify-content: center;
     align-items: flex-start;
     width: 0;
+    position: relative;
   }
 
   .spectrum-Modal {

packages/client/src/components/PeekScreenDisplay.svelte

@@ -1,6 +1,11 @@
 <script>
-  import { peekStore, dataSourceStore, notificationStore } from "../store"
+  import {
-  import { Modal, ModalContent, Button } from "@budibase/bbui"
+    peekStore,
+    dataSourceStore,
+    notificationStore,
+    routeStore,
+  } from "../store"
+  import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 
   let iframe
@@ -44,6 +49,11 @@
     iframe.contentWindow.removeEventListener("notification", proxyNotification)
   }
 
+  const handleFullscreen = () => {
+    routeStore.actions.navigate($peekStore.url)
+    handleCancel()
+  }
+
   $: {
     if (iframe && !listenersAttached) {
       attachListeners()
@@ -62,6 +72,14 @@
 
 {#if $peekStore.showPeek}
   <Modal fixed on:cancel={handleCancel}>
+    <div class="actions spectrum--darkest" slot="outside">
+      <ActionButton size="S" quiet icon="OpenIn" on:click={handleFullscreen}>
+        Full screen
+      </ActionButton>
+      <ActionButton size="S" quiet icon="Close" on:click={handleCancel}>
+        Close
+      </ActionButton>
+    </div>
     <ModalContent
       showCancelButton={false}
       showConfirmButton={false}
@@ -80,13 +98,19 @@
     border: none;
     width: calc(100% + 80px);
     height: 640px;
+    max-height: calc(100vh - 120px);
     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) {
+  .actions {
-    iframe {
+    display: flex;
-      max-height: calc(100vh - 80px);
+    flex-direction: row;
-    }
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    width: 640px;
+    max-width: 100%;
   }
 </style>