Skip to content

Conversation

Akash1000x
Copy link

Description 📣

Fixes UI overflow in Dailog box.
The issue was caused by setting bodyClassName="overflow-visible" in the ModalContent, which allowed dialog content to extend beyond the modal boundaries.

Fixes #4517


Type ✨

  • Bug fix
image

@maidul98
Copy link
Collaborator

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Greptile Summary

This PR fixes a UI overflow bug affecting dialog boxes throughout the Infisical frontend application. The issue was caused by setting bodyClassName="overflow-visible" on ModalContent components, which allowed dialog content to extend beyond the modal boundaries and create visual overflow problems.

The fix systematically removes the bodyClassName="overflow-visible" property from 25+ modal components across the codebase, including:

  • User and organization management modals (AddMemberModal, AddOrgMemberModal, etc.)
  • Secret management dialogs (CreateSecretRotationV2Modal, EditSecretSyncModal, etc.)
  • Access control modals (IdentityModal, GroupModal, etc.)
  • Configuration forms (AddExternalKmsForm, UpdateExternalKmsForm, etc.)
  • Administrative interfaces (AddServerAdminModal, AddOrganizationModal)

The ModalContent component already has proper overflow handling built-in with overflow-y-auto overflow-x-hidden classes applied to the CardBody component. By removing the overflow-visible override, modals now use their intended default behavior where content is properly contained within modal boundaries with vertical scrolling when needed.

This change integrates seamlessly with the existing modal system built on top of Radix UI Dialog primitives. The fix maintains all existing functionality while ensuring consistent visual behavior across all dialog components in the application.

Confidence score: 5/5

  • This PR is safe to merge with minimal risk as it only removes a problematic CSS class causing visual overflow issues
  • Score reflects a straightforward UI fix that removes unwanted styling without affecting any business logic or functionality
  • No files require special attention as all changes follow the same simple pattern of removing the overflow-visible class

25 files reviewed, no comments

Edit Code Review Bot Settings | Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Content overflow from dialog
2 participants