fix: invite teammates modal trash icon spacing

[mo-abdulai]

Closes #3298

Problem

The delete (trash) icon for additional invite rows was absolutely positioned too close to the right edge of the modal, causing awkward spacing and horizontal overflow.

Solution

• Added overflow-x-hidden to the modal container to prevent horizontal scrolling
• Increased right padding (pr-8 sm:pr-10) on modal header and form sections
• This keeps the trash icon visually aligned while preserving layout consistency

Steps to reproduce

1. Go to Members → Invite member
2. Click Add email to add a second invite row
3. Observe the delete (trash) icon near the right edge of the modal

Screenshots

Before

After

Notes

Pure UI change — no behavior or API changes.

cc @steven-tey — happy to adjust if you prefer a different approach

Summary by CodeRabbit

• Style
  • Improved horizontal spacing and layout in the invite workspace user modal for better visual presentation on larger screens.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

Someone is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Mohammed Abdulai seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Added overflow-x-hidden to the modal container and increased right-side padding in the modal body and InviteTeammatesForm to prevent delete icon overflow and eliminate unwanted horizontal scrolling in the Invite Teammates modal.

Changes

Cohort / File(s)	Summary
Modal Layout Adjustments apps/web/ui/modals/invite-workspace-user-modal.tsx	Added overflow-x-hidden to modal container to prevent horizontal scrolling; increased right-side padding in modal body and InviteTeammatesForm component to provide proper spacing for the delete icon and prevent it from appearing too close to the modal edge.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A modal that scrolled left and right,
Where delete icons vanished from sight!
With padding so snug and overflow hid,
The icons now shine—no more scroll, no more slid!
Clean spacing brings joy to each invite bid! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing spacing of the trash icon in the invite teammates modal, which is the primary focus of the PR.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #3298: added overflow-x-hidden to prevent horizontal scrolling and increased right padding to fix trash icon spacing and alignment.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the trash icon spacing issue. The UI adjustments (overflow-x-hidden and padding modifications) directly address the linked issue with no extraneous changes.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 13a8e41 and e425352.

📒 Files selected for processing (1)

• apps/web/ui/modals/invite-workspace-user-modal.tsx

🔇 Additional comments (3)

apps/web/ui/modals/invite-workspace-user-modal.tsx (3)

42-42: Verify that overflow-x-hidden doesn't clip legitimate content.

The addition of overflow-x-hidden prevents horizontal scrolling, which addresses the stated issue. However, ensure this doesn't hide any legitimate content that should be visible or scrollable, particularly on smaller viewports or when the modal contains wide content.

---

44-44: LGTM - Asymmetric padding for visual alignment.

The increased right padding (pr-8 / sm:pr-10) creates visual consistency with the form section below, which contains the trash icons. This is a common UI pattern where adjacent sections match padding to maintain alignment when one section has right-aligned controls.

However, verify the visual appearance on both mobile and desktop viewports to ensure the asymmetry doesn't create an unbalanced look in the header section.

---

65-65: LGTM - Increased right padding for trash icon spacing.

The additional right padding (pr-8 / sm:pr-10) appropriately accommodates the absolutely positioned trash icons for additional invite rows, preventing them from overflowing too close to the modal edge. This directly addresses the issue described in #3298.

---

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.}