Tanvi-Dashboard UI Fixes & Weekly Summary Enhancements

[TanviAnantula]

Description

Responsive UI fixes for Dashboard components on small screens (<768px), including Weekly Summary, Team Member Tasks, and Badges sections. Also ensures scrollable task table and consistent layout.

Related PRS (if any):

This is frontend PR
This PR replaces the earlier branch vijay-anand-dashboard-ui-fixes#2684 with a clean and conflict-free implementation of the intended changes.
To test this frontend PR, you need to checkout the development branch

Main changes explained:

• Fixed UI issue of the "Close this window" button in the Weekly Summarycomponent for screen sizes less than 768px
• Fixed UI issue of the Hours buttons in Team Member Tasks tab (under Tasks and Timelogs) for screen sizes less than 768px
• Fixed UI issue of the "Badge Report" button in the Badges tab (under Tasks and Timelogs) for screen sizes less than 768px
• Fixed UI issue of the Task table not being scrollable in the Team Member Tasks tab for screen sizes less than 768px

How to test:

Checkout the branch: git checkout clean-fix-feature
Run npm install
npm start
Clear browser cache/site data
Log in as Admin or Owner user
Go to Dashboard → Submit Weekly Summary and check if "Close this window" button is responsive under 768px
Go to Dashboard → Tasks and Timelogs → Tasks and check if hours buttons become dropdowns under 768px
Go to Dashboard → Tasks and Timelogs → Badges and check if "Badge Report" button is properly aligned under 768px
Go to Dashboard → Tasks and Timelogs → Tasks and check if task table is scrollable under 768px
Verify all the above components also display correctly on desktop/large screen

Screenshots or videos of changes:

Updated

Note:

All changes have been tested on both mobile and desktop screen sizes.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[ppsahu]

Hi, I have tested this PR in mobile view, and all the changes are working as expected and as per the screenshots. Below is the screen recording for reference.

Screen.Recording.2025-04-05.at.2.37.29.AM.mov

[palankigreeshma1109]

I have reviewed this PR and followed all the steps mentioned and everything is working as expected.

1. Go to Dashboard → Submit Weekly Summary and check if "Close this window" button is responsive under 768px - It's responsive.

2.Go to Dashboard → Tasks and Timelogs → Tasks and check if hours buttons become dropdowns under 768px - Yes and task table is also scrollable.

ee1184)

3.Go to Dashboard → Tasks and Timelogs → Badges and check if "Badge Report" button is properly aligned under 768px - It's properly alligned.

Attached screenshots for your reference.

[pavanputti]

I checked out the clean-fix-feature branch, ran npm install, and started the application using npm start. After clearing the browser cache and site data, I logged in as an Admin user and navigated to the Dashboard.

Verified the "Close this window" button in the Weekly Summary modal

The button was responsive on screen widths under 768px.

Ensured the task table remained scrollable and the hours buttons became dropdowns in the Tasks section

The task table remained scrollable, and the hours buttons were correctly displayed as dropdowns on smaller screens.

Verified the alignment of the "Badge Report" button in the Badges tab

The button was properly aligned on screen widths under 768px.
Everything works as expected.

[rsripathi2906]

Tested

• Verified the "Close this window" button in Weekly Summary is responsive and functional under <768px.
• Checked Hours buttons in Team Member Tasks — correctly render as dropdowns on small screens.
• Badge Report button in Badges tab is well-aligned for mobile view.
• Task table is now scrollable under 768px — works as expected.
• Also confirmed that all components display correctly on larger screens.
• Everything looks good to me — approving the PR.

Screen.Recording.2025-04-05.200650.mp4

[one-community]

Thank you all, merging!