Adding a task with attached text containing a long first line isn't truncated, and breaks layout about twenty HOT 2 CLOSED

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To address the issue of long first lines in task descriptions breaking the layout, follow these steps:

1. Open the file responsible for rendering tasks, likely located in /packages/twenty-website/src/components/TaskCard.js.

2. Locate the section where the task description is rendered. It might look something like this:

<div className="task-description">{task.description}</div>

3. Apply CSS truncation to the task description. Add the following CSS rules to the relevant stylesheet, likely located in /packages/twenty-website/src/styles/TaskCard.css:

.task-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

4. Ensure the CSS class is correctly applied to the task description element in TaskCard.js:

<div className="task-description">{task.description}</div>

This will ensure that long lines in task descriptions are truncated with an ellipsis, maintaining the table layout.

References

/packages/twenty-website/src/content/user-guide/tasks.mdx
/packages/twenty-website/src/content/user-guide/tasks.mdx

Ask Greptile

from twenty.

Very similar to: #5267

from twenty.