Implementing Task Name Pop-up for Long Task Names

[freedompraise]

Description

Currently, in our task list, long task names cause styling distortion when they exceed a certain character limit. To improve the user experience and maintain a clean interface, we want to implement a feature that allows users to view the full task name when it's truncated.

Proposed Solution

We propose implementing a pop-up or tooltip that appears when users interact with a task name. Here's how it should work:

1. When a task name exceeds a specified character limit (e.g., 20 characters), it is truncated with an ellipsis (...) to prevent styling issues.

2. When a user hovers over or clicks on a truncated task name, a pop-up or tooltip should appear, displaying the full task name.

3. The pop-up or tooltip should be visually appealing and unobtrusive, ensuring it enhances the user experience.

Tasks

• Implement the logic to truncate task names with an ellipsis (...) if they exceed the character limit.
• Create a pop-up or tooltip component that appears when users hover over or click on a truncated task name.
• Ensure the pop-up or tooltip displays the full task name.
• Test the functionality to ensure it works correctly on both desktop and mobile devices.
• Style the pop-up or tooltip to be visually appealing and user-friendly.

Additional Information

• Please consider the best practices for user interface design when implementing this feature to ensure a seamless user experience.
• Test the feature thoroughly to catch any issues related to responsiveness, usability, or performance.

Acceptance Criteria

• Users can hover over or click on a truncated task name to view the full task name in a pop-up or tooltip.
• The pop-up or tooltip is visually appealing and provides a smooth user experience.
• The feature works correctly on both desktop and mobile devices.
• All code is well-documented and follows coding standards.

[freedompraise]

This issue has partly been solved in a previous pr, but the UI used still needs some improvement