From 0f9dd201277c613cfda20c1fd3f714a5120f9988 Mon Sep 17 00:00:00 2001
From: Altay <altay@zebrastik.com>
Date: Sun, 17 Dec 2023 13:01:39 +0300
Subject: [PATCH] refactor: update `episode-ai-summary-placeholder`

---
 .../episode-ai-summary-placeholder.tsx          | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/episode-ai-summary/episode-ai-summary-placeholder.tsx b/components/episode-ai-summary/episode-ai-summary-placeholder.tsx
index e7543ce..09f9154 100644
--- a/components/episode-ai-summary/episode-ai-summary-placeholder.tsx
+++ b/components/episode-ai-summary/episode-ai-summary-placeholder.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 
 import { FAKE_EPISODE_SUMMARY } from '@/lib/fixtures/fake-episode-summary';
-import { Flex } from '@radix-ui/themes';
+import { Box, Flex } from '@radix-ui/themes';
 
 import { CollapsiblePanel } from '../ui/collapsible-panel';
 
@@ -16,11 +16,22 @@ export function EpisodeAISummaryPlaceholder(props: PropsWithChildren) {
         justify="center"
         left="0"
         position="absolute"
-        style={{ backdropFilter: 'blur(3px)', borderRadius: 10, zIndex: 1 }}
+        style={{
+          backdropFilter: 'blur(3px)',
+          zIndex: 1,
+        }}
         top="0"
         width="100%"
       >
-        {props.children}
+        <Box
+          style={{
+            backgroundColor: 'var(--color-page-background)',
+            borderRadius: 'var(--radius-3)',
+            overflow: 'hidden',
+          }}
+        >
+          {props.children}
+        </Box>
       </Flex>
     </CollapsiblePanel>
   );