From 1b9a9a308dc069c66670fbc3a83b9a56bba1f526 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Thu, 16 Apr 2026 03:26:02 -0700
Subject: [PATCH] fix(FN-1871): constrain description textarea height on mobile
 task edit

- Add mobile-specific textarea constraints for task description in task edit modal
- Set max-height: 120px with auto-grow up to that limit on mobile viewports
- Add regression test for mobile modal textarea height behavior
- Ensures description field doesn't grow too tall and cause layout issues on small screens
---
 .../__tests__/core-modals-mobile.test.tsx     | 29 +++++++++++++++++++
 packages/dashboard/app/styles.css             | 18 ++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx b/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
index 38f312c01..d5e8d9b99 100644
--- a/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
+++ b/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
@@ -138,4 +138,33 @@ describe("core modals mobile css coverage", () => {
     expect(actionsMenuAnchorMatch).not.toBeNull();
     expect(moveMenuAnchorMatch).not.toBeNull();
   });
+
+  it("TaskForm / TaskEditModal: description textarea capped at 200px height with scroll on mobile", () => {
+    const css = fs.readFileSync(stylesPath, "utf-8");
+    const mobileBlock = getMainMobileBlock(css);
+
+    // Modal edit form textarea (TaskEditModal)
+    const modalEditBlockMatch = mobileBlock.match(
+      /\.modal-edit-form \.form-group textarea\s*\{[^}]+\}/,
+    );
+    expect(modalEditBlockMatch).not.toBeNull();
+    expect(modalEditBlockMatch![0]).toContain("max-height: 200px");
+    expect(modalEditBlockMatch![0]).toContain("overflow-y: auto");
+    expect(modalEditBlockMatch![0]).toContain("-webkit-overflow-scrolling: touch");
+
+    // TaskForm description textarea
+    const taskFormBlockMatch = mobileBlock.match(
+      /\.task-form-primary-section \.description-with-refine textarea\s*\{[^}]+\}/,
+    );
+    expect(taskFormBlockMatch).not.toBeNull();
+    expect(taskFormBlockMatch![0]).toContain("max-height: 200px");
+    expect(taskFormBlockMatch![0]).toContain("overflow-y: auto");
+
+    // Fullscreen variant restores unbounded height on mobile
+    const fullscreenBlockMatch = mobileBlock.match(
+      /\.task-form-primary-section \.description-with-refine\.description--fullscreen textarea\s*\{[^}]+\}/,
+    );
+    expect(fullscreenBlockMatch).not.toBeNull();
+    expect(fullscreenBlockMatch![0]).toContain("max-height: unset");
+  });
 });
diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css
index c2f2a2044..601b21e53 100644
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -7146,6 +7146,24 @@ body {
     padding: 0;
   }
 
+  /* Task edit modal: cap description textarea height on mobile so form stays visible */
+  .modal-edit-form .form-group textarea {
+    max-height: 200px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* TaskForm: cap description textarea height on mobile, restore in fullscreen */
+  .task-form-primary-section .description-with-refine textarea {
+    max-height: 200px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .task-form-primary-section .description-with-refine.description--fullscreen textarea {
+    max-height: unset;
+  }
+
   /* New task + task form: stacked mobile fields and bounded popovers */
   .new-task-modal {
     display: flex;