Update app.py

app.py

@@ -80,6 +80,7 @@ gradio.utils.watchfn_spaces = watchfn
 DEFAULT_QUESTION = "In MCP's 1st Birthday Hackathon, hosted by Anthropic and Gradio, what percentage of participants submitted a solution so far?"
 
 CSS_FULL_WIDTH = """
+<style>
 html,
 body,
 main,
@@ -101,10 +102,46 @@ main,
 .content-padding {
     padding: 0 1.5rem 0;
 }
+</style>
+"""
+CSS_JS_AUTO_RESIZE = """
+<style>
+/* Make all Gradio textboxes use auto height */
+textarea { 
+  height: auto !important;
+  min-height: 2em;       /* fallback minimal height */
+  overflow: hidden !important;
+  resize: none !important;
+  box-sizing: border-box;
+  width: 100% !important;
+}
+/* Optionally, ensure the container width works nicely on mobile */
+.gradio-container {
+  width: 100% !important;
+}
+</style>
+
+<script>
+window.addEventListener('input', function (event) {
+  const el = event.target;
+  if (el.tagName === 'TEXTAREA') {
+    el.style.height = 'auto';
+    el.style.height = (el.scrollHeight) + 'px';
+  }
+});
+// On initial load, trigger resizing for existing contents
+window.addEventListener('load', function () {
+  document.querySelectorAll('textarea').forEach(el => {
+    el.style.height = 'auto';
+    el.style.height = (el.scrollHeight) + 'px';
+  });
+});
+</script>
 """
 
 with gr.Blocks(elem_classes=["full-width-app"]) as gaia:
-    gr.HTML(f"<style>{CSS_FULL_WIDTH}</style>")
+    gr.HTML(CSS_FULL_WIDTH}")
+    gr.HTML(CSS_JS_AUTO_RESIZE)
 
     with gr.Column(elem_classes=["content-padding"]):
         gr.Markdown("## General AI Assistant")