ENG-3106: Fix manual task modal content overflowing boundaries

[gilluminate]

Ticket ENG-3106

Description Of Changes

Fix modal content overflowing outside the modal boundaries in the manual task condition and task creation modals. Both AddEditConditionModal and AddManualTaskModal set a minWidth on the modal body that exceeded Ant Design's default 520px modal width, causing form fields to visually extend beyond the modal container.

Replace the styles={{ body: { minWidth } }} approach with explicit width props using the project's existing MODAL_SIZE constants from modal-sizes.ts.

Code Changes

• Use width={MODAL_SIZE.lg} (768px) on AddEditConditionModal and AddManualTaskModal instead of body minWidth styles that overflowed the default 520px modal container

Steps to Confirm

1. Navigate to Integrations > select a manual task integration > Conditions tab
2. Click "Add condition" - verify all form fields (field source, field picker, operator, value) stay within the modal
3. Switch field source to "Dataset field" - verify the side-by-side dataset/field pickers fit within the modal
4. Go to Manual tasks tab > click "Create manual task" - verify all fields stay within that modal too

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored		Mar 24, 2026 6:20pm
fides-privacy-center	Ignored		Mar 24, 2026 6:20pm

[greptile-apps]

Greptile Summary

This PR fixes a UI overflow bug where form content in the manual task condition and task creation modals visually extended beyond the modal boundaries. The root cause was that both modals applied a minWidth style directly to the modal body (650px and 775px respectively), while Ant Design's default modal container width is only 520px — causing the body to overflow its container.

The fix replaces body-level minWidth styling with a proper width prop set at the modal level using the project's existing MODAL_SIZE.lg constant (768px), which correctly sizes the entire modal container.

Key changes:

• AddEditConditionModal: styles={{ body: { minWidth: "650px" } }} → width={MODAL_SIZE.lg} (768px)
• AddManualTaskModal: styles={{ body: { minWidth: "775px" } }} → width={MODAL_SIZE.lg} (768px)
• New changelog entry added

Note: AddManualTaskModal previously had a minWidth of 775px, while MODAL_SIZE.lg is 768px. In practice this is fine — minWidth on the body was the wrong mechanism entirely (it caused overflow rather than controlling the modal) and the actual form content fits comfortably at 768px as confirmed by the PR screenshot. No logic or functionality changes are involved.

Confidence Score: 5/5

• Safe to merge — minimal, targeted UI fix with no logic or data changes.
• The change is a one-line fix in two files, replaces an incorrect styling approach (body minWidth overflowing the container) with the correct modal-level width prop using established constants, and has been manually verified per the PR description and screenshot. No functional logic, API calls, or data handling is touched.
• No files require special attention.

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/integrations/configure-tasks/AddEditConditionModal.tsx	Replaced styles={{ body: { minWidth: "650px" } }} with width={MODAL_SIZE.lg} (768px) to properly size the modal container instead of overflowing the body.
clients/admin-ui/src/features/integrations/configure-tasks/AddManualTaskModal.tsx	Replaced styles={{ body: { minWidth: "775px" } }} with width={MODAL_SIZE.lg} (768px); the old body minWidth exceeded the default 520px modal container, causing overflow. New width sets a proper container-level constraint.
changelog/7748-fix-manual-task-modal-overflow.yaml	New changelog entry for the bug fix — correct type, description, and PR number.

_{Reviews (1): Last reviewed commit: "Add changelog for PR #7748" | Re-trigger Greptile}

[claude]

Clean, well-scoped fix. The root cause is correctly diagnosed: styles={{ body: { minWidth } }} only expanded the inner body content without widening the modal container, causing content to overflow. Switching to width={MODAL_SIZE.lg} properly sizes the entire modal container.

One minor observation worth noting:

AddManualTaskModal previously declared minWidth: "775px" on the body, while AddEditConditionModal used minWidth: "650px". Both now use MODAL_SIZE.lg (768px). For AddManualTaskModal, that's a slight reduction (775 → 768px) in the effective inner content width (the width prop includes the modal's own padding, so the content area will be a few px narrower than 768). The screenshot in the PR description confirms this looks fine in practice, so this is not a blocker — just worth being aware of if tighter form layouts appear on smaller screens.

No critical issues. The use of the shared MODAL_SIZE constant is the right approach and keeps modal sizing consistent across the codebase.

[jpople]

Looks good, like the consistency.