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;