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} /> +
.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); }