Prevent HF iframe resizing from stretching HumanTouch

Hugging Face Spaces render the Gradio app inside an auto-resized iframe, so viewport-height CSS can feed back into a very tall page. The editor and canvas now use compact fixed responsive heights, and the Humanizer textboxes use fewer Gradio rows.

Constraint: Hugging Face Spaces render the app inside an auto-resized iframe
Rejected: Only shorten the compose input | did not address vh-driven editor and canvas height
Confidence: high
Scope-risk: narrow
Directive: Do not reintroduce vh units into app CSS without verifying inside the live Space iframe
Tested: py -m unittest discover -s tests -v; py -m py_compile app.py tests\test_humantouch.py; local browser measurements at 1280x900 and 375x812
Not-tested: Groq generation behavior, unchanged

app.py

@@ -179,10 +179,10 @@ def build_custom_css() -> str:
         letter-spacing: 0;
     }
 
-    #main_container {
-        min-height: 100vh;
-        padding: 30px 32px 22px;
-    }
+    #main_container {
+        min-height: auto;
+        padding: 30px 32px 22px;
+    }
 
     #header {
         max-width: 1180px;
@@ -380,10 +380,12 @@ def build_custom_css() -> str:
         color: var(--ht-text) !important;
     }
 
-    #humanizer_input textarea,
-    #humanizer_output textarea {
-        min-height: 42vh !important;
-    }
+    #humanizer_input textarea,
+    #humanizer_output textarea {
+        height: 260px !important;
+        min-height: 180px !important;
+        max-height: 320px !important;
+    }
 
     #humanize_btn,
     #compose_btn {
@@ -425,10 +427,11 @@ def build_custom_css() -> str:
         box-shadow: 0 8px 20px rgba(34, 48, 71, 0.10);
     }
 
-    #symbiotic_canvas {
-        height: 58vh !important;
-        overflow: hidden;
-    }
+    #symbiotic_canvas {
+        height: 280px !important;
+        max-height: 320px !important;
+        overflow: auto;
+    }
 
     #symbiotic_canvas .message,
     #symbiotic_canvas .user,
@@ -521,14 +524,17 @@ def build_custom_css() -> str:
             gap: 12px;
         }
 
-        #humanizer_input textarea,
-        #humanizer_output textarea {
-            min-height: 30vh !important;
-        }
-
-        #symbiotic_canvas {
-            height: 52vh !important;
-        }
+        #humanizer_input textarea,
+        #humanizer_output textarea {
+            height: 140px !important;
+            min-height: 120px !important;
+            max-height: 180px !important;
+        }
+
+        #symbiotic_canvas {
+            height: 200px !important;
+            max-height: 220px !important;
+        }
 
         #compose_btn {
             width: 100%;
@@ -590,15 +596,15 @@ def create_interface():
                         with gr.Column(variant="panel", elem_classes=["workspace-panel"]):
                             gr.Markdown("### Rewrite pasted text")
                             with gr.Row(elem_classes=["humanizer-grid"]):
-                                input_text_humanizer = gr.Textbox(
-                                    label="Source text", lines=15,
-                                    placeholder="Paste a draft that sounds too polished, too generic, or too flat.",
-                                    elem_id="humanizer_input", scale=1
-                                )
-                                output_text_humanizer = gr.Textbox(
-                                    label="Human rewrite", lines=15,
-                                    interactive=False, elem_id="humanizer_output", scale=1
-                                )
+                                input_text_humanizer = gr.Textbox(
+                                    label="Source text", lines=9,
+                                    placeholder="Paste a draft that sounds too polished, too generic, or too flat.",
+                                    elem_id="humanizer_input", scale=1
+                                )
+                                output_text_humanizer = gr.Textbox(
+                                    label="Human rewrite", lines=9,
+                                    interactive=False, elem_id="humanizer_output", scale=1
+                                )
                             with gr.Row():
                                 style_slider_h = gr.Slider(0, 100, 50, label="Style: clear to lyrical")
                                 tone_slider_h = gr.Slider(0, 100, 50, label="Tone: reserved to expressive")

tests/test_humantouch.py

@@ -104,11 +104,23 @@ class VisualThemeTests(unittest.TestCase):
         self.assertIn("@media (max-width: 768px)", css)
         self.assertIn("grid-template-columns: 1fr", css)
         self.assertIn("#humanizer_input, #humanizer_output", css)
+        self.assertNotIn("vh", css)
         self.assertNotIn("clamp(", css)
         self.assertIn("width: 100% !important;", css)
         self.assertIn(".humanizer-grid > .form", css)
         self.assertIn("#chat_input textarea", css)
         self.assertIn("min-height: 52px !important;", css)
+        self.assertIn("height: 260px !important;", css)
+        self.assertIn("height: 280px !important;", css)
+        self.assertIn("height: 140px !important;", css)
+        self.assertIn("height: 200px !important;", css)
+
+    def test_humanizer_textboxes_use_compact_rows(self):
+        source = inspect.getsource(app.create_interface)
+
+        self.assertIn("label=\"Source text\", lines=9", source)
+        self.assertIn("label=\"Human rewrite\", lines=9", source)
+        self.assertNotIn("lines=15", source)
 
     def test_canvas_input_uses_compact_placeholder(self):
         source = inspect.getsource(app.create_interface)