[FIX] Text overflow on timeline

[Hitarthsheth07]

FIX: #6977

Implementation:

1. Parent (Summary componenet) width is set to 100%. (dosen't grow even if the child exceeds width)
2. span element is set to text-overflow: ellipses when overflown.

[greptile-apps]

PR Summary

This PR fixes text overflow issues in the timeline summary component by implementing proper width constraints and text truncation with ellipsis for long content.

• Added width: 100% to StyledSummary in /packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx to prevent container expansion
• Implemented text truncation in /packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx with text-overflow: ellipsis and white-space: nowrap
• Added overflow: hidden to prevent horizontal scrolling on long task titles and bodies

_{2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Consider adding max-width property to ensure the text doesn't push other elements out of position

[Bonapara]

Looking good! Can you check why some values are not taking the full width?

[Hitarthsheth07]

Is there a bug with the timeline? @Bonapara

https://www.loom.com/share/de72e092dc024af89e27f0ff2d334ae3?sid=2b14e0f7-4731-4e33-a584-b180942388f0

The timeline doesn't show changes in local setup too...

[Bonapara]

I had the same problem @Hitarthsheth07 but running the worker solved my issue: npx nx run twenty-server:worker

[Hitarthsheth07]

I had the same problem @Hitarthsheth07 but running the worker solved my issue: npx nx run twenty-server:worker

Gotcha!

[Bonapara]

I had the same problem @Hitarthsheth07 but running the worker solved my issue: npx nx run twenty-server:worker

Gotcha!

Did it work?

[Hitarthsheth07]

I had the same problem @Hitarthsheth07 but running the worker solved my issue: npx nx run twenty-server:worker

Gotcha!

Did it work?

Havent tried it yet! I'm travelling right now. Will get back to you in about an hour

But why is it not working on the demo site then?

[Hitarthsheth07]

@Bonapara

The latest commit fix the problem you mentioned.

However, some components still overflows when the size shrinks...
Should I open a new issue for this?

https://www.loom.com/share/159d5c3a376641c2b162fecfbd116be0?sid=3184e459-38bd-43f0-84c8-699be4cdd7ae

[Bonapara]

Yes, please @Hitarthsheth07! Good observation

[Hitarthsheth07]

Yes, please @Hitarthsheth07! Good observation

Sure, you can merge this if you want.

[FelixMalfait]

Great thanks!

[github-actions]

Thanks @Hitarthsheth07 for your contribution!
This marks your 5th PR on the repo. You're top 6% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter