fix(toast): long text exceeds wrapper

[wingkwong]

Closes #5552

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• Bug Fixes
  • Fixed text overflow issues in toast notifications. Enhanced the toast component to properly handle long text content—titles now truncate gracefully with ellipsis, and descriptions wrap appropriately within the available space without breaking the layout.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 3d22723

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@heroui/toast	Patch
@heroui/theme	Patch
@heroui/react	Patch
@heroui/autocomplete	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/number-input	Patch
@heroui/radio	Patch
@heroui/select	Patch
@heroui/table	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Dec 11, 2025 2:25pm
heroui-sb	Ready	Preview	Comment	Dec 11, 2025 2:25pm

[coderabbitai]

Walkthrough

A changeset entry was added to bump @heroui/toast and @heroui/theme packages to patch versions. The toast component was modified to fix long text overflow by adding min-w-0 to wrapper and content slots, truncate to the title slot, and break-words to the description slot.

Changes

Cohort / File(s)	Summary
Changeset Entry .changeset/chilled-onions-burn.md	Added changeset bumping @heroui/toast and @heroui/theme to patch versions with commit message referencing long text fix
Toast Component Styling packages/core/theme/src/components/toast.ts	Added min-w-0 to wrapper and content slots to prevent flex overflow; added truncate to title slot for text truncation with ellipsis; added break-words to description slot for text wrapping

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Straightforward CSS class additions addressing a specific layout bug
• No logic or control flow changes
• Changes are self-contained and clearly documented in the linked issue
• Minimal risk of side effects with these display utilities

Suggested labels

👀 Status: To Review

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description follows the required template structure with the issue reference (#5552) but lacks concrete implementation details in the key sections (Description, Current behavior, New behavior, Additional Information), leaving them empty or with placeholder comments only.	Complete the Description, Current behavior, and New behavior sections with specific details about the fix, such as the CSS changes applied (min-w-0, truncate, break-words) and how they resolve the text overflow issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(toast): long text exceeds wrapper' directly and clearly describes the primary change in the PR—fixing the toast component to handle long text that exceeds the wrapper, which aligns with the changeset and code modifications.
Linked Issues check	✅ Passed	The code changes directly address the requirements of issue #5552 by implementing CSS modifications (min-w-0, truncate, break-words) to prevent text overflow and enable proper text truncation in the toast component.
Out of Scope Changes check	✅ Passed	All changes in the PR are focused on fixing the toast text overflow issue in #5552; the changeset entry and CSS modifications are directly scoped to resolving the reported bug without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/issue-5552

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a37912e and 3d22723.

📒 Files selected for processing (2)

• .changeset/chilled-onions-burn.md (1 hunks)
• packages/core/theme/src/components/toast.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Prettier
• GitHub Check: TypeScript
• GitHub Check: Build
• GitHub Check: ESLint
• GitHub Check: Continuous Release

🔇 Additional comments (2)

.changeset/chilled-onions-burn.md (1)

1-6: Changeset scope and messaging look good

Patch bumps for @heroui/toast and @heroui/theme with a concise message tied to #5552 are appropriate for this UI‑only bugfix.

packages/core/theme/src/components/toast.ts (1)

76-82: Toast overflow fix is correct; please confirm desired truncation behavior

Adding min-w-0 to wrapper and content plus truncate on title and break-words on description should prevent long text from overflowing the toast while keeping the layout intact, which aligns with #5552’s intent.

One thing to double‑check in your stories/docs:

• That single‑line truncation on the title (vs. wrapping) is the desired design change.
• That very long, unbroken description strings now wrap as expected across all placements and with/without icons/close button.

If that matches design expectations, this looks good to ship.

---

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

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5977

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5977

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5977

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5977

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5977

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5977

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5977

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5977

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5977

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5977

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5977

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5977

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5977

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5977

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5977

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5977

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5977

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5977

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5977

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5977

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5977

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5977

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5977

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5977

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5977

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5977

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5977

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5977

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5977

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5977

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5977

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5977

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5977

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5977

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5977

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5977

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5977

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5977

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5977

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5977

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5977

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5977

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5977

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5977

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5977

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5977

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5977

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5977

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5977

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5977

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5977

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5977

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5977

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5977

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5977

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5977

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5977

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5977

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5977

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5977

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5977

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5977

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5977

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5977

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5977

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5977

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5977

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5977

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5977

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5977

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5977

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5977

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5977

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5977

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5977

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5977

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5977

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5977

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5977

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5977

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5977

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5977

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5977

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5977

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5977

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5977

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5977

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5977

commit: 3d22723