Skip to main content

Toast top-center Message form horizontal alignment fix (WEB-1105)

Version: 0.5.0 ยท Type: ๐Ÿ› Bug Fix

WEB-1105

Problemโ€‹

Toaster position="top-center" rendered Message-form toasts (w-fit) left-aligned instead of centered. Alert-form toasts (w-[420px], full container width) appeared correct, masking the underlying issue.

Root cause: The <ol> container was correctly centered on screen (left: 50% + translateX(-50%)). However, the <li> is position: absolute with no explicit left, so the browser placed it at the container's left edge. For w-fit Message toasts narrower than the container, this caused visible left-offset.

The attempted fix of adding left: 50% to the <li> introduced a new bug: for position: absolute elements, left: 50% reduces the available width to container_width - left_offset, shrinking w-fit toasts from 420 px to 210 px.

Changed Filesโ€‹

  • packages/design/src/components/Toast/ToastItem.tsx
  • packages/design/src/components/Toast/Toaster.tsx
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

Changesโ€‹

  1. ToastItemProps adds align?: 'left' | 'center' | 'right' (default 'left', backward-compatible).
  2. For center, the <li> keeps left: 0 (full 420 px available width preserved) and uses translateX(calc(210px - 50%)) in the transform. The fixed 210px is half of TOAST_WIDTH; 50% is half the element's own width โ€” together they center the toast within the container without constraining its width.
  3. Toaster passes the parsed align value down to ToastItem.
  4. 3 new unit tests covering left / center / right alignment.