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
This commit is contained in:
Fusion
2026-04-16 03:26:02 -07:00
committed by gsxdsm
parent 6927cc028a
commit 5939cb9b11
2 changed files with 47 additions and 0 deletions

View File

@@ -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");
});
});

View File

@@ -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;