fix(notifications): text overflow with line-clamp

[waleedlatif1]

Summary

• Fixed notification text overflow when messages are long
• Restructured layout to use flexbox instead of float for close button
• line-clamp now works correctly with proper ellipsis truncation

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 21, 2026 6:16pm

[greptile-apps]

Greptile Summary

This PR fixes text overflow issues in the notification component by restructuring the layout from float-based positioning to flexbox. The key improvement is adding min-w-0 flex-1 to the message container, which enables the line-clamp utility to work correctly in flexbox contexts. The close button is now positioned using shrink-0 instead of float-right ml-[16px], resulting in cleaner layout logic. The error indicator has been repositioned inside the message div, maintaining the same visual presentation. These changes improve code maintainability and fix the text truncation behavior.

• Fixed notification text overflow by restructuring from float to flexbox layout
• Added min-w-0 class to message div to enable proper line-clamp behavior in flex containers
• Changed close button styling from float-right ml-[16px] to shrink-0 for proper alignment
• Reorganized DOM structure to group message content and dismiss button in a flex container
• All changes are pure layout fixes with no logic or functionality modifications

Confidence Score: 5/5

• This PR is safe to merge with no identified issues
• This is a straightforward layout fix with minimal risk. The changes are purely styling-related using standard Tailwind CSS classes. The DOM structure modification maintains all existing functionality and accessibility features (aria-label, Button component, Tooltip component). The min-w-0 flex-1 pattern is a well-established solution for line-clamp in flex containers. No logic changes, no new dependencies, and no breaking changes.
• No files require special attention

Important Files Changed

Filename

Overview

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx

Fixed text overflow in notifications by restructuring layout from float-based to flexbox. Added min-w-0 flex-1 to message div to enable line-clamp to work correctly. Changed close button styling from float-right ml-[16px] to shrink-0 for proper flex alignment. Reorganized DOM structure to group message and close button in flex container. All changes are semantically correct and maintain accessibility.

Sequence Diagram

sequenceDiagram
    participant Before as Before (Float Layout)
    participant After as After (Flexbox Layout)

    Note over Before: Message Container<br/>with float-right close button
    Before->>Before: Message text<br/>line-clamp-2/4<br/>(overflow issues)
    Before->>Before: Close Button<br/>float-right ml-16px<br/>(breaks line-clamp)

    Note over After: Message Container (Flexbox)<br/>items-start gap-8px
    After->>After: Message div<br/>min-w-0 flex-1<br/>(enables line-clamp)
    After->>After: Close Button<br/>shrink-0<br/>(proper alignment)
    
    Note over After: Result: Text properly<br/>truncates with ellipsis

Loading