From 8540f4020ba2a2af55f4656d4d836dda2c300552 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:34:15 +0100
Subject: [PATCH] Improve client preview styles to work with increase client
 padding

---
 .../[screenId]/_components/AppPreview.svelte  | 22 ++++++++++++++-----
 .../src/components/ClientAppSkeleton.svelte   |  1 -
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 0ce9e096f2..a5d14062dc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -275,6 +275,7 @@
     src="/app/preview"
     class:hidden={loading || error}
   />
+  <div class="underlay" />
   <div
     class="add-component"
     class:active={isAddingComponent}
@@ -295,11 +296,10 @@
 <style>
   .loading {
     position: absolute;
-    container-type: inline-size;
-    width: 100%;
-    height: 100%;
-    border: 2px solid transparent;
-    box-sizing: border-box;
+    width: calc(100% - 12px);
+    height: calc(100% - 12px);
+    left: 6px;
+    top: 6px;
   }
 
   .loading.tablet {
@@ -318,7 +318,6 @@
     display: grid;
     place-items: center;
     position: relative;
-    overflow: hidden;
     margin: auto;
     height: 100%;
   }
@@ -363,6 +362,17 @@
     height: 100%;
   }
 
+  .underlay {
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -1;
+    --offset: 2px;
+    width: calc(100% - 12px + 2 * var(--offset));
+    height: calc(100% - 12px + 2 * var(--offset));
+    left: calc(6px - var(--offset));
+    top: calc(6px - var(--offset));
+  }
+
   .add-component {
     position: absolute;
     bottom: 20px;
diff --git a/packages/frontend-core/src/components/ClientAppSkeleton.svelte b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
index a1c90d2db7..f867fccddb 100644
--- a/packages/frontend-core/src/components/ClientAppSkeleton.svelte
+++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
@@ -58,7 +58,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: 4px;
     overflow: hidden;
     background-color: var(--spectrum-global-color-gray-200);
   }