fix(ui): truncate long slug in event type card

[pranavv00]

Fix issue- #28533

Long slug/URL text in the event type card could overflow its container and break layout.

This change replaces break-words with Tailwind's truncate utility on the text elements to ensure long text is properly truncated with ellipsis, preventing overflow while preserving the existing layout and responsiveness.

No structural or layout changes were introduced.

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/web/modules/event-types/views/event-types-listing-view.tsx">

<violation number="1" location="apps/web/modules/event-types/views/event-types-listing-view.tsx:197">
P2: `truncate` won’t show ellipsis on inline `span`/`small` elements; they need a constrained box (block/inline-block or flex item with width) for `text-overflow` to work. As-is, long titles/slugs will be hard-clipped by the parent overflow instead of showing an ellipsis.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: truncate won’t show ellipsis on inline span/small elements; they need a constrained box (block/inline-block or flex item with width) for text-overflow to work. As-is, long titles/slugs will be hard-clipped by the parent overflow instead of showing an ellipsis.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/modules/event-types/views/event-types-listing-view.tsx, line 197:

<comment>`truncate` won’t show ellipsis on inline `span`/`small` elements; they need a constrained box (block/inline-block or flex item with width) for `text-overflow` to work. As-is, long titles/slugs will be hard-clipped by the parent overflow instead of showing an ellipsis.</comment>

<file context>
@@ -194,13 +194,13 @@ const Item = ({
     <div>
       <span
-        className="text-default break-words font-semibold ltr:mr-1 rtl:ml-1"
+        className="text-default truncate font-semibold ltr:mr-1 rtl:ml-1"
         data-testid={`event-type-title-${type.id}`}>
         {type.title}
</file context>

Suggested change

	className="text-default truncate font-semibold ltr:mr-1 rtl:ml-1"
	className="text-default inline-block max-w-full truncate font-semibold ltr:mr-1 rtl:ml-1"

[sahitya-chandra]

Can you add a before and after video demo of the UI changes?

[Ryukemeister]

hi there, thank you for your contribution. can you add a visual demo of the fix before and after, thanks!