Rahul fix reports team page last table for small screens

[slidracoon72]

Description

Fixed the UI and layout of the last table in the Reports->Reports->Teams->Team Page

Related PRS (if any):

Not related

Main changes explained:

• Improved the UI and layout of TeamReport.jsx for better responsiveness on smaller screens.
• Enhanced TeamReportLogs.jsx and TeamsReportLogs.jsx to ensure compatibility with dark mode.
• Updated relevant CSS files to optimize the last table's UI for smaller screens.

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 as admin user
5. check the before and after pictures and videos below to clearly see the updates made and understand how to test them effectively
6. go to Reports->Reports->Teams->Team Page
7. verify that the last table is responsive and displays correctly on smaller screens.
8. verify this new feature works in dark mode

Screenshots or videos of changes:

BEFORE

Video Link:
https://github.com/user-attachments/assets/0e210e7b-549d-4c57-97d8-90abf387e69b

AFTER

Video Link:
https://github.com/user-attachments/assets/1c0eda57-3cd6-4150-b247-3516ee30f314

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[brn8]

I verified that the last table is responsive and displays correctly on smaller screens. However, I noticed that as the screen shrinks, a bottom scrollbar appears on the table. It might be worth adjusting the styling to ensure the table remains fully responsive without requiring horizontal scrolling.

[slidracoon72]

@brn8 This table is quite large and won't fit entirely on smaller screens, so horizontal scrolling is necessary.

[brn8]

Got it. Thanks for the clarification! @slidracoon72

[Nayakar-Rohith]

I have reviewed this PR and tested the fix for the reports team page layout on small screens. The table now displays correctly without any UI issues. The fix is working as expected. Approving this PR.

[vikasreddynomula]

I have reviewed this PR and tested the fix for the reports team page layout on small screens. The table now displays correctly without any UI issues, and the fix is functioning as expected. Approving this PR.

[puchakayalasaisaketh]

I have reviewed the PR and all the changes are working fine

[Akhilguntur2801]

I have tested this PR, and the table renders correctly in both light and dark modes across various screen sizes.

[nikhilrouth]

I have reviewed the changes, and the UI and layout improvements for the last table in Reports → Reports → Teams → Team Page are working as expected. The updates ensure better responsiveness on smaller screens and function correctly in both dark and light modes.

However, I have observed that when shrinking the window, there is a noticeable gap between the table header and the filter above it (attached image below). They are not shrinking proportionally wrt each other. I think this might require further adjustment. I hope this comes under the scope of the fix? Let me know your thoughts.

working as expected

But Gap between the both rows after the shrink

[vasavi-139]

Functionality works as expected.

[abdel-lall]

The table is responsive as described, however, the input boxes appear jammed. Adding a little space between them would improve their appearance.

[angad363]

I tested the PR by following the given instructions and checked the Team Page under Reports. The last table is now responsive across different screen sizes and displays correctly. Additionally, the updates are working as expected in dark mode.

Attaching a video for reference. Approving the PR.

PR.3269.mp4