💄 style: fix plugin iframe width (#721)

lobehub · Dec 19, 2023 · 53ad132 · 53ad132
1 parent 3f7ce1d
commit 53ad132
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/...app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/IFrameRender/index.tsx b/...app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/IFrameRender/index.tsx
@@ -35,7 +35,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, width = 800, height = 300,
 
   return (
     <>
-      {loading && <Skeleton active style={{ width }} />}
+      {loading && <Skeleton active style={{ maxWidth: '100%', width }} />}
       <iframe
         // @ts-ignore
         allowtransparency="true"
@@ -51,6 +51,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, width = 800, height = 300,
           // iframe 在 color-scheme:dark 模式下无法透明
           // refs: https://www.jianshu.com/p/bc5a37bb6a7b
           colorScheme: 'light',
+          maxWidth: '100%',
         }}
         width={width}
       />

diff --git a/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx b/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx
@@ -120,7 +120,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
 
   return (
     <>
-      {loading && <Skeleton active style={{ width }} />}
+      {loading && <Skeleton active style={{ maxWidth: '100%', width }} />}
       <iframe
         // @ts-ignore
         allowtransparency="true"
@@ -136,6 +136,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
           // iframe 在 color-scheme:dark 模式下无法透明
           // refs: https://www.jianshu.com/p/bc5a37bb6a7b
           colorScheme: 'light',
+          maxWidth: '100%',
         }}
         width={width}
       />