TaskDialog UI updated, overlapping issue resolved

[HarshRaj29004]

Description

Fixed UI issues in the task dialog where edit icons were overlapping with long text and causing layout problems:

Changes Made:

• Restructured table layout: Split content and action areas into separate columns with a fixed-width right column (w-32) for all edit/save/cancel icons

• Added text truncation: Long text in all fields now displays with ellipsis (...) instead of wrapping or causing horizontal scrollbars

  • Applied truncate block classes with max-w-0 w-full constraints to content cells
  • Added title attributes for hover tooltips to show full text

• Consistent icon placement: All edit icons (pencil), save/cancel buttons, and copy button (UUID) now align vertically in the rightmost column

• Fixes: Edit icon covers text in task details #431

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend)
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable
• Verified all tests pass
• Updated documentation, if needed

Additional Notes

• Screen Shots:

[github-actions]

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

• Check the "Files changed" tab
• Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
• Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
• Finally, submit all the comments!

More information on how to conduct a self review:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!