fix(toast): truncate long message

[MdSaifAliMolla]

Closes #5552

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

• Bug Fixes

  • Toast notifications now handle long text gracefully, preventing layout overflow.
  • Titles and descriptions truncate to keep messages readable and tidy.
  • Content areas better contain wide content for consistent display across devices.

• Style

  • Refined toast layout to maintain alignment and spacing with varying message lengths.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6545bc9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

@MdSaifAliMolla is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Updated toast component styles to add min-width and truncation utility classes to wrapper, content, title, and description slots to ensure text overflow is truncated and layout does not overflow.

Changes

Cohort / File(s)	Summary
Toast truncation and layout safeguards packages/core/theme/src/components/toast.ts	Added utility classes: wrapper uses min-w-0 and flex-1; content uses min-w-0; title and description use truncate to enforce text overflow handling and prevent layout overflow within toast slots.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description includes only the 'Closes' line and leaves all template sections empty, so it lacks the required brief description, current behavior, new behavior details, breaking change information, and any additional context. This makes it impossible to understand the purpose and impact of the changes at a glance. The screenshot alone does not substitute for the missing textual explanations.	Please complete all sections of the description template by adding a concise summary of the change, detailing the current and new behaviors, indicating whether this is a breaking change, and providing any relevant additional information or context.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly reflects the primary focus of the changes by indicating that long toast messages are now truncated. It is concise, specific, and aligns directly with the modification in the toast component.
Linked Issues Check	✅ Passed	The code adds CSS classes and layout constraints to the toast wrapper, title, description, and content elements to ensure text truncation and prevent overflow, directly fulfilling the requirements of issue #5552. These changes implement the expected behavior of truncating long toast messages with ellipses as described in the linked issue. No objectives from the issue have been omitted.
Out of Scope Changes Check	✅ Passed	The pull request exclusively modifies the toast component by adding text truncation and layout safeguards to address the linked issue, and it does not introduce any unrelated changes or features. All modifications are directly tied to the goals of issue #5552.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 3737870 and 6545bc9.

📒 Files selected for processing (1)

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

🔇 Additional comments (3)

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

76-76: LGTM!

The addition of min-w-0 and flex-1 to the wrapper is correct. min-w-0 is essential for allowing flex items to shrink below their intrinsic content width, which is necessary for text truncation to work. flex-1 ensures the wrapper grows to fill available space.

---

77-78: Verify single-line truncation matches requirements.

The truncate utility enforces single-line text with ellipsis (white-space: nowrap), preventing any text wrapping. This addresses the truncation requirement, but please confirm this matches the expected behavior from issue #5552, which showed examples that could be interpreted as either single-line truncation or multi-line wrapping scenarios. If multi-line truncation is needed, consider using line-clamp-{n} utilities instead.

---

81-81: LGTM!

Adding min-w-0 to the content slot is correct. This allows the content container to shrink below its intrinsic width, which is necessary for the nested truncation pattern to work properly with the wrapper's min-w-0.

---

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