Skip to content

Bug: Address Dialog Overflow in React Dashboard #4621

@Ryrahul

Description

@Ryrahul

Description

When an Address entity has multiple custom fields, the address create/edit dialog in the React Dashboard overflows beyond the viewport. This causes important UI elements—including form fields and the "Save Address" button—to become inaccessible, with no scrolling available.

Steps to Reproduce

  1. Define multiple custom fields on the Address entity (e.g., 5+ string fields).
  2. Navigate to /dashboard/customers/<id>
  3. Click the edit icon on an existing address, or "+ Add new address"
  4. Observe the dialog behavior.

Expected Behavior

  • The dialog should be scrollable when content exceeds viewport height.
  • The "Save Address" button should always remain accessible.

Actual Behavior

  • Dialog content overflows beyond the bottom of the screen.
  • No vertical scrolling is available.
  • Custom fields and the "Save Address" button are cut off and unreachable.
  • Root cause: DialogContent lacks a max-height and overflow configuration.

Screenshot

Image

Environment

  • @vendure/core version: 3.6.0
  • Browser: Chrome (reproducible in all browsers)

Workaround

the Save Address button becomes inaccessible when enough custom fields are present. ( zoom out in browser to save)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions