Anne fix UI issues for Task table under people report page

[Annezhang673]

Description

Related PRS (if any):

For backend use development branch
Previous PR PR #2005

Main changes explained:

• Update file PeopleTableDetails.css

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log in as an admin user
5. Add multiple tasks (combine with both short task name and long task name) for User A following this instruction. (make sure to add task hours)
6. go to dashboard→ reports→ people->User A (who has been assigned with tasks with one or more longer task names)
7. Check there's no text overlap between columns.
8. Check the "End Date," is not moved under the first column, "Task," when resizing the screen.

Screenshots or videos of changes:

Please refer to the following video for the bugs fixed. Note that I have already created the tasks and assigned to testing account prior.

video1820018236.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4ca74ac
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/66dbd729eff2ad0008adc551
😎 Deploy Preview	https://deploy-preview-2650--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jinxyou]

The UI fix seems to be working fine. Great work!

[linkhanthtel]

Texts are no longer overlap for screen size (375px and above). Nice work!

[AJAYINAVOLU]

Changes are working as expected.

Thank You

[mohangadde1]

working as expected, no overlapping of text.

[CillianRen]

The UI changes works great

[SMitta11]

Tested this and it works as expected .
But I have added 3 tasks for this user and it is showing only 2. It am not sure if it is related to this PR but could you please check if this expected result.
Screenshot:

[Jingyii800]

I have tested this feature and it worked as expected. Even though the task name is very long, the text won't overlap.

bandicam.2024-09-07.19-50-02-433.mp4

[vishavk1992]

i have tested this PR and it works as expected

[nikhilpittala16]

I have tested the PR and everything works as expected.

PR.vid.32.mp4

[KurtisIvey]

Hi Anne, I noticed there were merge conflict on this. Looks like it's just a CSS thing, but we'd love to get this moved to final review asap once it's cleared up

[one-community]

This PR overlapped with this one. Please carefully fix conflicts and add this into your PR too:

[Watchdog00]

I have completed the testing and got the expected results. Good job!

[navya9989]

I have tested this PR and Everything is working as Expected

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	31160db
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/6713196e6712dd000828f71b
😎 Deploy Preview	https://deploy-preview-2650--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[one-community]

Thank you all, merging!