From 2e9a0d6b3d89ba9671d054ada42f035958dda8a9 Mon Sep 17 00:00:00 2001
From: Seohyun-Roh <76952602+Seohyun-Roh@users.noreply.github.com>
Date: Fri, 22 Nov 2024 03:33:28 +0000
Subject: [PATCH] =?UTF-8?q?=EC=9C=84=EC=A0=AF=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9C=84=EC=95=84=EB=9E=98=20=EA=B7=B8=EB=9D=BC?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80=20(#1504)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/routes/_/render/[id]/+page.svelte     |  4 +--
 .../src/components/PageContent.svelte         | 26 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/usersite/src/routes/_/render/[id]/+page.svelte b/apps/usersite/src/routes/_/render/[id]/+page.svelte
index b78c4294..05be7e82 100644
--- a/apps/usersite/src/routes/_/render/[id]/+page.svelte
+++ b/apps/usersite/src/routes/_/render/[id]/+page.svelte
@@ -37,6 +37,6 @@
 </script>
 
 <div style:--usersite-theme-color={$query.publicSite.themeColor} class={css({ display: 'contents' })}>
-  <h1 class={css({ textStyle: '34b', marginBottom: '32px' })}>{$query.publicPageById.title}</h1>
-  <TiptapRenderer content={$query.publicPageById.content.content} />
+  <h1 class={css({ textStyle: '34b', marginTop: '28px', marginBottom: '32px' })}>{$query.publicPageById.title}</h1>
+  <TiptapRenderer style={css.raw({ marginBottom: '28px' })} content={$query.publicPageById.content.content} />
 </div>
diff --git a/sdks/browser-sdk/src/components/PageContent.svelte b/sdks/browser-sdk/src/components/PageContent.svelte
index ebc38285..19e68e18 100644
--- a/sdks/browser-sdk/src/components/PageContent.svelte
+++ b/sdks/browser-sdk/src/components/PageContent.svelte
@@ -10,6 +10,30 @@
   let { siteUrl, pageId }: Props = $props();
 </script>
 
-<div class={flex({ flexGrow: '1', paddingX: '20px', paddingY: '28px' })}>
+<div class={flex({ flexGrow: '1', position: 'relative', paddingX: '20px' })}>
+  <div
+    class={css({
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: 'full',
+      height: '32px',
+      bgGradient: 'to-b',
+      gradientFrom: 'white',
+      gradientTo: 'white/0',
+    })}
+  ></div>
   <iframe class={css({ flexGrow: '1', width: 'full' })} src={`${siteUrl}/_/render/${pageId}`} title=""></iframe>
+  <div
+    class={css({
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      width: 'full',
+      height: '32px',
+      bgGradient: 'to-t',
+      gradientFrom: 'white',
+      gradientTo: 'white/0',
+    })}
+  ></div>
 </div>