Update app.py

app.py

@@ -197,7 +197,20 @@ def get_storyteller_avatar_url():
     # Using an external wizard avatar image
     return "https://api.dicebear.com/7.x/bottts/svg?seed=wizard&backgroundColor=b6e3f4&eyes=bulging"
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+# Add this before your gr.Blocks definition
+custom_css = """
+.compact-file-output > div {
+    min-height: 0 !important;
+    padding: 0 !important;
+}
+.compact-file-output .file-preview {
+    margin: 0 !important;
+    display: flex;
+    align-items: center;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     # Header section with improved instructions
     gr.Markdown("""
     # 🔮 AI Story Studio
@@ -317,19 +330,24 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     clear.click(lambda: [], None, chatbot, queue=False)
     clear.click(lambda: "", None, msg, queue=False)
     
-    # "Download My Story" row
-    with gr.Row():
-        save_btn = gr.Button("Download My Story", variant="secondary")
+    # "Download My Story" row with improved layout
+    with gr.Row(equal_height=True):  # Force equal height for all children
+        # Use Column for the button to control width
+        with gr.Column(scale=4):
+            save_btn = gr.Button("Download My Story", variant="secondary", size="lg")
         
-        with gr.Column(scale=0, min_width=250):
+        # Use Column for the file output with matching height
+        with gr.Column(scale=1):
             story_output = gr.File(
-                label="My Story",
+                label=None,  # Remove the label that adds extra height
                 file_count="single",
                 file_types=[".md"],
                 interactive=False,
-                visible=True
+                visible=True,
+                elem_classes="compact-file-output"  # Optional: for custom CSS styling
             )
     
+    # Connect the save button to the save_story function
     save_btn.click(
         fn=save_story,
         inputs=[chatbot],