[WEB-6763] fix: date range dropdown clipped in sub-issues list

[b-saikrishnakanth]

Description

• The date range dropdown in the sub-issues list was rendering behind
  other elements due to the parent CollapsibleContent's overflow-hidden
• Added renderInPortal prop to render the dropdown via createPortal()
  to document.body, matching how other dropdowns (Date, Priority) already work

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Screenshots and Media (if applicable)

Before

After

Test Scenarios

References

Summary by CodeRabbit

• Style
  • Improved dropdown positioning for start date and due date fields in issue details, ensuring better visibility and placement on the screen.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-6763] Date dropdown is cropped and not fully visible for sub-work items in Work Item modal

This comment was auto-generated by Plane

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9e1825d9-d992-41ce-b757-0b2754c2a109

📥 Commits

Reviewing files that changed from the base of the PR and between 130ba5e and 6ae023a.

📒 Files selected for processing (1)

• apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx

---

📝 Walkthrough

Walkthrough

Updated the DateRangeDropdown component for start and due date properties by adding placement="top-end" and renderInPortal props to adjust dropdown positioning and DOM rendering behavior without modifying selection logic.

Changes

Cohort / File(s)	Summary
DateRangeDropdown UI Configuration apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx	Added placement="top-end" and renderInPortal props to DateRangeDropdown component to adjust dropdown positioning and portal rendering.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A little dropdown tweak so fine,
Top-end placement, portal design!
Two props added, neat and bright,
Dates positioned just right! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing a date range dropdown clipping issue in the sub-issues list, with a relevant ticket reference.
Description check	✅ Passed	The description covers the main required sections: detailed problem explanation, type of change (bug fix), before/after screenshots, and is well-structured. Test scenarios section is empty but non-critical.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-sub-issue-date-range-dropdown-overflow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}