feat: enhance HTML preview styling and fix content handling

app.py

@@ -4,7 +4,7 @@ import re
 import anthropic
 import os
 from dotenv import load_dotenv
-from utils import svg_to_png_base64
+from utils import svg_to_png_base64, fix_html_styles_for_preview
 import pathlib
 from logger import setup_logger
 import html
@@ -558,22 +558,22 @@ def create_animation_preview(animation_desc: str, svg_content: str) -> tuple:
         print(f"Animation preview saved to: {html_path}")
 
         # Create iframe HTML - only escape quotes for srcdoc attribute
-        safe_html_content = html_content.replace('"', """)
+        fixed_html_content = fix_html_styles_for_preview(html_content)
+        safe_html_content = fixed_html_content.replace('"', """)
+
         preview_html = f"""
-        <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
-            <div style='display: block; align-items: center; margin-bottom: 10px;'>
-            </div>
-            <div id='animation-container' style='min-height: 300px; display: block; justify-content: center; align-items: center; background: #fafafa; border-radius: 4px; padding: 20px;'>
-                <iframe srcdoc="{safe_html_content}"
-                    width="100%" height="600px" 
-                    style="border:none; overflow:hidden;"
+        <div style='padding: 20px; width:100%; background: #fff; border: 1px solid #eee; border-radius: 8px; position: relative;'>
+            <div style='border:1px solid #ddd; border-radius:8px; background:#fafafa; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; box-sizing:border-box;'>
+                <iframe 
+                    srcdoc="{safe_html_content}"
+                    style="width: 360px; height: 360px; border:none; border-radius:8px; overflow:hidden;"
                     sandbox="allow-scripts allow-same-origin">
                 </iframe>
             </div>
         </div>
         """
 
-        return preview_html, html_content
+        return preview_html, fixed_html_content
 
     except Exception as e:
         error_html = create_error_html(f"❌ Error creating animation: {str(e)}")
@@ -641,7 +641,9 @@ with demo:
 
                 # Add dropdown change event
                 example_dropdown.change(
-                    fn=load_example, inputs=[example_dropdown], outputs=[svg_file, object_name]
+                    fn=load_example,
+                    inputs=[example_dropdown],
+                    outputs=[svg_file, object_name],
                 )
 
                 process_btn = gr.Button("🔄 Decompose Structure", variant="primary")