Skip to content

fix(notifications): text overflow with line-clamp #2921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
waleedlatif1 merged 1 commit into from
Jan 21, 2026
Merged

fix(notifications): text overflow with line-clamp #2921

waleedlatif1 merged 1 commit into from
Jan 21, 2026

Conversation

@waleedlatif1
Copy link
Collaborator

@waleedlatif1 waleedlatif1 commented Jan 21, 2026

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
Copy link

vercel bot commented Jan 21, 2026 •
edited
Loading

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

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

Request Review

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 21, 2026

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

@waleedlatif1 waleedlatif1 merged commit fb8868c into staging Jan 21, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the fix/notifs branch January 21, 2026 18:20
@waleedlatif1 waleedlatif1 mentioned this pull request Jan 22, 2026
Merged
waleedlatif1 added a commit that referenced this pull request Jan 22, 2026
@waleedlatif1 @icecrasher321 @emir-karabeg
v0.5.67: loading, password reset, ui improvements, helm updates (#2928)
cc2be33 
* fix(zustand): updated to useShallow from deprecated createWithEqualityFn (#2919)

* fix(logger): use direct env access for webpack inlining (#2920)

* fix(notifications): text overflow with line-clamp (#2921)

* chore(helm): add env vars for Vertex AI, orgs, and telemetry (#2922)

* fix(auth): improve reset password flow and consolidate brand detection (#2924)

* fix(auth): improve reset password flow and consolidate brand detection

* fix(auth): set errorHandled for EMAIL_NOT_VERIFIED to prevent duplicate error

* fix(auth): clear success message on login errors

* chore(auth): fix import order per lint

* fix(action-bar): duplicate subflows with children (#2923)

* fix(action-bar): duplicate subflows with children

* fix(action-bar): add validateTriggerPaste for subflow duplicate

* fix(resolver): agent response format, input formats, root level (#2925)

* fix(resolvers): agent response format, input formats, root level

* fix response block initial seeding

* fix tests

* fix(messages-input): fix cursor alignment and auto-resize with overlay (#2926)

* fix(messages-input): fix cursor alignment and auto-resize with overlay

* fixed remaining zustand warnings

* fix(stores): remove dead code causing log spam on startup (#2927)

* fix(stores): remove dead code causing log spam on startup

* fix(stores): replace custom tools zustand store with react query cache

* improvement(ui): use BrandedButton and BrandedLink components (#2930)

- Refactor auth forms to use BrandedButton component
- Add BrandedLink component for changelog page
- Reduce code duplication in login, signup, reset-password forms
- Update star count default value

* fix(custom-tools): remove unsafe title fallback in getCustomTool (#2929)

* fix(custom-tools): remove unsafe title fallback in getCustomTool

* fix(custom-tools): restore title fallback in getCustomTool lookup

Custom tools are referenced by title (custom_${title}), not database ID.
The title fallback is required for client-side tool resolution to work.

* fix(null-bodies): empty bodies handling (#2931)

* fix(null-statuses): empty bodies handling

* address bugbot comment

* fix(token-refresh): microsoft, notion, x, linear (#2933)

* fix(microsoft): proactive refresh needed

* fix(x): missing token refresh flag

* notion and linear missing flag too

* address bugbot comment

* fix(auth): handle EMAIL_NOT_VERIFIED in onError callback (#2932)

* fix(auth): handle EMAIL_NOT_VERIFIED in onError callback

* refactor(auth): extract redirectToVerify helper to reduce duplication

* fix(workflow-selector): use dedicated selector for workflow dropdown (#2934)

* feat(workflow-block): preview (#2935)

* improvement(copilot): tool configs to show nested props (#2936)

* fix(auth): add genericOAuth providers to trustedProviders (#2937)

---------

Co-authored-by: Vikhyath Mondreti <vikhyathvikku@gmail.com>
Co-authored-by: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waleedlatif1