Satya fix teams UI

[SatyashanthiT]

Description
This PR addresses the UI issues on the Teams page in the admin/owner profile. These issues are primarily related to table and card layout at various screen sizes:

At 768px and below, the table is not centered and the top two cards lack padding.
At 575px and below, the table starts side-scrolling.
At 479px and below, the cards stack vertically.
Around 400px and below, the members modal’s table cuts off and starts side-scrolling.

Related PRS (if any):
This PR is related to the PR2416 front-end PR.

Main changes explained:
Updated Teams.css to reduce font size at 575px and below.
Adjusted padding for cards at 768px and below.
Reduced card size at 479px to prevent vertical stacking.
Implemented overflow-x adjustments for members modal at 400px and below.

How to test:
Check into the current branch.
Run npm install to update dependencies.
Clear site data/cache.
Log in as an admin user.
Navigate to Dashboard → Teams page.
Verify table alignment, card layout, and responsiveness across 768px, 575px, 479px, and 400px screen sizes.
Ensure that the changes function properly in dark mode.

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	369f29c
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/6755f85f0314e30008114ce5
😎 Deploy Preview	https://deploy-preview-2736--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.

[Muzammil603]

not working as expected

[ziyanw52]

Hi, I have test this PR, and when if it's 427px and below, the cards stack vertically. Please see screenshot as reference.

The merge-base changed after approval.

[nikhilgiri0226]

I have reviewed the PR and all the below issues seems to be fixed but there is a slight misalignment in the position of button "Active teams" when the screen size was 400 px or below. I am not sure if this is the expected behavior or needs to be fixed, So, I am not requesting a change.

At 768px and below, the table is not centered and the top two cards lack padding.
At 575px and below, the table starts side-scrolling.
At 479px and below, the cards stack vertically.
Around 400px and below, the members modal’s table cuts off and starts side-scrolling.

[Jingyii800]

I have tested this function and under the 756 px width, the teams list and members list looks as expected.

bandicam.2024-10-12.00-13-09-985.mp4

The merge-base changed after approval.

[ShreyaLaheri]

I have tested this PR - functionality wise everything looks okay. However, there seems to be a little misalignment in elements as we change screen sizes.

[SharadhaS24]

The PR is working as expected in 700px 300px,400px and 500px perfectly . Tested the PR in Safari with both light and dark mode.

[SharadhaS24]

The PR is working as expected in 700px 300px,400px and 500px perfectly . Tested the PR in Safari with both light and dark mode.

The merge-base changed after approval.

[NK3101]

The PR is working as expected in 700px, 400px and 500px. Tested the PR in both light and dark mode.

The merge-base changed after approval.

[Muhideenthegreat]

Verification:

The UI is much responsive with the various paddings added and works as expected:

[SatyashanthiT]

All requested changes have been addressed, and the failing tests are resolved. This PR is ready for review.

[ziyanw52]

Hi, I've checked this and the UI looks good!

[one-community]

Thank you all, merging!