fix: prevent block card name text from overlapping icons

[Anil567849]

Summary

This PR fixes a UI issue in block cards where long block names overlapped with other icons.
The text now hide properly and maintains spacing without colliding with icons.

Type of Change

• Bug fix

Testing

• Tested with long block names to confirm text no longer overlaps icons.
• Verified alignment works for both short and long names.

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)

Screenshots/Videos

Before: Long block names overlapped with icons, breaking layout.

After: Text hide properly; icons remain aligned.

[vercel]

@Anil567849 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR addresses a UI overflow issue in the workflow block cards where long block names would visually overlap with adjacent icons in the header area. The fix is implemented in the workflow-block.tsx component by modifying the CSS classes for the name container and input field.

The key changes involve:

• Changing the name container from min-w-0 to w-full overflow-hidden to properly contain text overflow
• Adding w-full class to the input field to ensure it takes the full available width
• Preserving all existing functionality including the name editing feature, maxLength={18} restriction, and dynamic maxWidth styling based on component state (isEnabled and displayIsWide)

This solution integrates seamlessly with the existing flexbox layout system used throughout the workflow block cards. The component maintains its responsive behavior where the name span adjusts its maximum width based on the block's enabled state and display width, while now properly preventing text from breaking out of its allocated space and overlapping with icons.

The fix is minimal and surgical, targeting only the specific layout issue without affecting the component's logic, state management, or interaction patterns. The existing title={name} attribute ensures users can still view the full name via tooltip when text is truncated.

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it only addresses a visual layout issue
• Score reflects simple CSS class changes that maintain all existing functionality while fixing the overflow problem
• No files require special attention as the changes are straightforward styling fixes

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}