adjuest poster and mian chat

src/components/ChatUI.tsx

@@ -377,7 +377,8 @@ const ChatUI = () => {
   return (
     <>
       <KaTeXStyle />
-      <div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center">
+        <div className="h-[100dvh] flex flex-col bg-white max-w-3xl w-full mx-auto relative shadow-xl">
           {/* Header */}
           <header className="bg-white shadow flex-none">
             <div className="flex items-center justify-between px-4 py-3">
@@ -460,7 +461,7 @@ const ChatUI = () => {
           </header>
 
           {/* Main Chat Area */}
-        <div className="flex-1 overflow-hidden">
+          <div className="flex-1 overflow-hidden bg-gray-100">
             <ScrollArea className="h-full p-2" ref={chatAreaRef}>
               <div className="space-y-4">
                 {messages.map((message) => (
@@ -663,6 +664,7 @@ const ChatUI = () => {
             </DialogContent>
           </Dialog>
         </div>
+      </div>
 
       {/* 添加 SharePoster 组件 */}
       <SharePoster 

src/components/SharePoster.tsx

@@ -72,17 +72,18 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
       const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
         bgcolor: '#f3f4f6',
         scale: 1,  // 回到较安全的值
-        width: targetWidth + (extraSpace * 2),
+        width: targetWidth + (extraSpace * 5),
-        height: adjustedHeight + (extraSpace * 2),
+        height: adjustedHeight + (extraSpace * 5),
         style: {
           padding: `${extraSpace}px`,
-          margin: '0',
+          margin: '0 auto',
           width: '120%',
           height: '110%',
           transform: `scale(${scale})`,
           transformOrigin: 'top left',
           background: '#f3f4f6',
           boxSizing: 'border-box'
+          
         },
         quality: 1.0
       });
@@ -168,7 +169,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
         onClose();
       }
     }}>
-      <DialogContent className="max-w-[100vw] w-full sm:max-w-[100vw] max-h-[90vh] flex flex-col p-0">
+      <DialogContent className="max-w-[100vw] w-full sm:max-w-[50vw] max-h-[90vh] flex flex-col p-0">
         {/* 图片容器 */}
         <div className="flex-1 overflow-auto ">
           {posterImage && (