Long task names overflow the task container UI and are not selectable in multi-select mode

[phjackl3]

Bug Description

Tasks with long task names overflow the task container UI when looking at tasks on the Kanban board. Image attached.

Because the select box is at the right of the task name, and because the task name overflows in the UI, it is not possible to click the select box for tasks that have overflowed.

Example:
Create a task with the name 1234.
Create another task with the name 1234567890abcdefghijklmnopqrstuvwxyz
Go to tasks -> by status.
The task with the long name overflows the task container in the UI.
Hover over the task with the short name. A select box appears in the top right of the task container.
Hover over the task with a long name. No select box appears.

Expected behavior

Tasks with long task names should truncate before the end of the container UI. The select box for a task should be visible in the UI even for tasks with long names that need an ellipsis.

[Lucifer4255]

Can I work on this issue @Bonapara ?

[Bonapara]

hi @Lucifer4255, I think the core team will handle it as it's an high-priority bug. Thanks! (and thanks @phjackl3 for raising the issue!)

[Lucifer4255]

Hi @Bonapara I still checked this error we can easily solve this by truncating the task.title upto a certain length but the page is not rendering my changes in dev env

[Bonapara]

If it's a small change, feel free to submit a PR, @Lucifer4255. It's not guaranteed to be merged, though!

[guillim]

@Lucifer4255 I am going to work on this topic. Can you send me the branch or the PR if any ?

[Lucifer4255]

Hi @guillim i have mentioned the pr in the chat you can check

[guillim]

I looked at your PR but I see one big drawback : the trimming will not be responsive so it's not the best option for the users.

I haven't worked on that so far, so I am curious : how come the overflow ellipsis or something equivalent in CSS doesn't work ?

[Lucifer4255]

Well i tried to edit through CSS it clearly doesn't works and also if i try to edit the overflowingtextwithtooltip.tsx it will affect every component which uses despite we dont need to truncate in them or not

[guillim]

I get it. I will have a look in the coming days to see if I can find a CSS way to do this. I'll let you know what I come up with. Keep me posted as well !

[guillim]

I followed as much as i could a CSS way to fix it. I opened a PR here #9009 so you can have a look @Lucifer4255 . I am still waiting for a core team review before we merge that.

As you can see I tried to touch as less as possible the components, while bringing the CSS behavior as required.

Longest part was to check that all impacted component in the app remained unchanged TBH !