Another try

app.py

@@ -138,10 +138,11 @@ def generate_image_handler(x, negative_prompt, fine_edge, fix_perspective, grow_
 
 # --- Gradio UI ---
 
-# CSS FIX: Constrain the component height to prevent it from exploding 
-# when high-res images are loaded.
+# CSS FIX: 
+# Since the custom component cannot take an ID, we target the wrapper (#mq-wrapper).
+# We force the wrapper to a fixed height to contain the canvas.
 css = """
-#mq-container {
+#mq-wrapper {
     height: 70vh !important;
     max-height: 800px;
     width: 100%;
@@ -149,6 +150,11 @@ css = """
     justify-content: center;
     align-items: center;
 }
+/* Ensure the component inside fills the wrapper but respects the limits */
+#mq-wrapper > * {
+    height: 100%;
+    width: 100%;
+}
 .row {
     display: flex;
     justify-content: center;
@@ -164,8 +170,9 @@ with gr.Blocks(title="MagicQuill V2", css=css) as demo:
         """)
         
     with gr.Row():
-        # Added elem_id="mq-container" to target the CSS fix
-        ms = MagicQuillV2(elem_id="mq-container")
+        # FIX: Wrap in a Column with elem_id, since MagicQuillV2 doesn't accept elem_id directly
+        with gr.Column(elem_id="mq-wrapper"):
+            ms = MagicQuillV2()
 
 
     with gr.Row():
@@ -187,8 +194,6 @@ with gr.Blocks(title="MagicQuill V2", css=css) as demo:
 
     btn.click(
         generate_image_handler, 
-        # Note: We do NOT need to explicitly add 'request' to inputs here.
-        # Gradio handles type hinting for gr.Request automatically.
         inputs=[ms, negative_prompt, fine_edge, fix_perspective, grow_size, edge_strength, color_strength, local_strength, seed, steps, cfg], 
         outputs=ms
     )
@@ -403,5 +408,4 @@ app = gr.mount_gradio_app(app, demo, path="/", root_path="/demo")
 
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
-
+    uvicorn.run(app, host="0.0.0.0", port=7860)