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:
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user