Skip to content

Quanta Modal ignores className and hardcodes a 90vw width #130

Description

@mliebischer

Problem

packages/components/src/components/Modal/Modal.quanta.tsx hardcodes w-full max-w-[90vw] on the modal box and ignores any className passed by the caller: the tailwind-variants result is placed after the {...props} spread on both the ModalOverlay and the inner RACModal, so a caller-provided className is always overwritten.

Image

Its sibling Dialog.quanta.tsx handles this correctly (it merges props.className via twMerge), so the two components behave inconsistently.

Impact

  • All Quanta Modal consumers render at ~90vw width: @plone/contents' DeleteModal and UploadModal, and the History revert dialog from [CMSUI] - History route #30/Add History route (#30) #120.
  • The Figma design ("Volto UI – Quanta") shows much narrower confirmation modals, e.g. for the delete confirmation — so every confirmation dialog currently deviates from the design.
  • There is no way to fix this from the outside, since className is silently dropped.

Proposal

  1. Merge the caller's className like Dialog.quanta does (e.g. composeRenderProps(props.className, (className, renderProps) => twMerge(modalStyles(renderProps), className))), for both the overlay and the modal element.
  2. Callers (DeleteModal, UploadModal, revert dialog) then pass an appropriate width, e.g. max-w-md, to match the design.
  3. Optionally discuss a narrower default width — that changes all consumers at once (bigger blast radius), so it should be a deliberate follow-up.

Acceptance criteria

  • Given a Quanta Modal with className="max-w-md", when it renders, then the modal box is constrained to that width.
  • Given a Quanta Modal without a className, the current default rendering is unchanged.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions