Angad - Hotfix broken teams page formatting and team members not visible.

[angad363]

Description

There was a bug introduced last week where the Team Members of a particular team were not visible when a user clicks on the team members button. Detailed information about the bug:

Related PRS (if any):

This bug was introduced because of the frontend PR #3168

This PR is related to development branch in backend.
…

Main changes explained:

• Changed and reverted the logic of team members visibility in popup.
• Changed the CSS to align everything as per requirements.
• Fixed Delete button style to accommodate long team members' names.
• Fixed the Active team members slider (default is Active and slider is green).
• Fixed the Teams overview cards and resized them and made them accommodate more than three digit team numbers.
• Fixed the style of team members in the popup.

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin or owner user
5. go to dashboard→ Other Links→ Teams
6. Verify if the alignment of the elements is proper.
7. Click on the members button of a team and verify if the team members are visible.
8. Check if you are able to add team members in the team.
9. Check if delete button text doesn't wrap if team member name is too long.
10. Check the team overview cards have been resized and are looking clean.
11. Check if edit-delete buttons in teams table look like below in screenshot.
12. Verify if team members, team member numbers, active status, toggle switch and date added are aligned and in same line.
13. Verify the active status slider is green by default and are able to change the status by clicking and moving mouse left and right (Right : Inactive (Grey), Middle : Active (Green), Left : See All (Blue)).

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	369920e
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67f5d0e05769b30008cfb8eb
😎 Deploy Preview	https://deploy-preview-3366--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.

[nikhilpittala16]

I have tested the PR and everything works as expected.

PR.vid.7.mp4

[manushajyasta30]

Changes work as expected. alignment of the elements is proper. Clicked on the members button of a team and verified the team members are visible. able to add team members in the team. delete button text is not wrapped if team member name is too long.

Requesting to clean up the code (remove the commented code and console.logs if possible.)

[myeeli]

The teams table is aligned properly and i was bale to view the team members when I'm trying to see the team members. I was able to add new team member and if the team member name is very large the delete button text is not wrapped. Everything is working well with varying screen sizes.

Suggestion: While deleting a user it would be better if a pop up comes up to confirm if the user should be deleted or not.

[akanksha7]

Logged in as admin and verified Teams section under Dashboard → Other Links. Checked element alignment, team member visibility, add/delete functionality, and card layout. Confirmed delete button text does not wrap with long names. Verified toggle behavior and alignment for all fields. All looks good, approving the PR.

[sravankumarbodakonda]

I've tested the PR, and everything is working as expected. Approving it now

[CodewithKoushica]

Tested:

• Verified the UI changes
• Confirmed the functionality of populating team members in the popup

Everything is working smoothly — neat and clean implementation.
Looks good to me, ready to merge!

[one-community]

Thank you all, merging!