Julia - Fix dashboard responsiveness - Merge to development

[JuliaHa0902]

Description

Merge pull request 3537 to development

Related PRS (if any):

This PR is related to PR 3537

Main changes explained:

Merge 3537 to development
…

How to test:

check into current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as admin/owner user
Right click on the page > inspect > Toggle device toolbar so you can interact with the page like in a mobile phone
Go to dashboard
Verify that Tasks and Timelogs table is expanded to the full screen.
Verify that Tasks and Timelogs table is scrollable and you can see all user tasks.
Verify that Leaderboard is scrollable horizontally
In Leaderboard, click on the timebar of an individual. Verify that Back to Top button doesn't cover the Edit button
In Team Member Tasks table, click on a task of a member. Verify that you can scroll horizontally to see all information of the task
Click on Add Intangible Time Entry. Verify that the placeholder disappears when you click on the Rich Text input field
Add Tangible Time Entry and Weekly Summary. Verify that the placeholder disappears when you click on the Rich Text input field.
Verify that it is easy to add and edit Tangible and Intangible time entry in mobile
Go to Projects page by clicking on Other Links > Projects
Verify that Add New Project button shows in mobile
Verify that Back to Top button doesn't cover any information when you scroll to the bottom of the page.
Click on WBS button
Verify that you can see the project name
Verify that the table is expanded to the full width
Click on a task
Verify that you can see all the information of the table by scrolling right/left
Verify that all the buttons are visible, no button is cut off
Click on Edit and verify that all button is properly shown
Review in Dark mode and Light mode

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	77b53cc
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6928896bc17dce0008e48d0e
😎 Deploy Preview	https://deploy-preview-4268--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 project configuration.

[ManeeshBuddha21]

Hii Julia, Logged in as Owner and tested on mobile view using Inspect -> Toggle device toolbar.

Dashboard → Tasks & Timelogs

Table expands to full width
Scrollable horizontally (works but column spacing and alignment need adjustment)
Leaderboard scrollable
Back to Top button overlaps with Edit button
Clicking a task -> cannot scroll left/right

Add Time Entries & Weekly Summary
Intangible & Tangible Time Entry placeholders disappear correctly on focus
Weekly Summary -> unable to type in Rich Text box
Add/Edit Tangible or Intangible entries work well

Projects Page
"Add New Project” button not visible
Back to Top button covers lower content
WBS ->Project name visible but covered by “Return to Project List” button

Table not expanded to full width
Cannot scroll horizontally inside task table
Buttons (Edit, Delete, etc.) all visible

Other checks
Dark/Light mode works fine
Layout loads correctly, no major crashes or console errors

Feedback

Mobile responsiveness and table layout need refinement , mainly horizontal scrolling, full-width expansion, and overlapping button issues. Functionality works, but UI alignment and visibility still need improvement for a smoother mobile experience.

Screenshots for your reference:

Test Results

[Vinay944924]

Hi Julie,

I ran the PR and i found that when you view the Team Member Tasks table, and click on the task of the member, to view the information the horizontal scroll is not working. I have provided the screenshot of that.

Other than that I could test all the other things which are working fine and even reviewed the dark to light mode which is working

[JuliaHa0902]

Hi @Vinay944924,
To scroll in mobile view, you have to click and drag in your computer. It is similar to swipe action in mobile.
Thank you!

[JuliaHa0902]

@ManeeshBuddha21 Have you switched to this branch? Have you run the following command?
git switch julia_fix_dashboard_responsiveness_merge_development
git pull
npm install
npm run start:local

[Vinay944924]

Hi Julie,
I ran the PR once again locally and couldn't do the same as i mentioned. I have provided the screenshot.

[Sriamshreddy000]

Hey Julia,
Followed all the steps in the How to Test section and logged in as an admin. Toggled the device toolbar to interact with the page like on a mobile phone.
- Dashboard loaded correctly.
- Verified that the Tasks and Timelogs table expands to full screen.
- Tasks and Timelogs table is scrollable, and I was able to view all user tasks.
- Leaderboard is scrollable horizontally.
- After clicking timebar of an individual, "Back to Top" button at the bottom does not overlap with the Edit button.
- Unable to scroll horizontally in the Team Member Tasks table to view all task details.
- Placeholder disappears correctly when clicking on the input field for Intangible Time Entry.
- Placeholder also disappears as expected for Tangible Time Entry and Weekly Summary.
- Able to easily add and edit Tangible and Intangible Time Entries.
- “Add New Project” button appears correctly under Other Links → Projects.
- “Back to Top” button doesn’t cover any information when scrolling to the bottom.
- “WBS” button works, and the project name is visible.
- The table expands to the full width of the mobile screen.
- All buttons are properly visible after clicking a task.
- After clicking “Edit,” all buttons remain properly visible.
- Reviewed in both Light and Dark modes, both look good.
I’ll attach a screenshot showing the horizontal scroll issue in the Team Member Tasks table, along with a few working examples for reference. I’m keeping the number of attachments limited to avoid making the comment overly long, but please let me know if you like me to include additional screenshots.

[Anusha-Gali]

Hi Julia,

I have tested your PR locally. All the functionalities you mentioned are working fine except for "In Team Member Tasks table, click on a task of a member. Verify that you can scroll horizontally to see all information of the task"

Have attached a screen recording of the same. I did just do a swipe as well as press and swipe but the horizontal scroll doesn't seem to work.

Screen.Recording.2025-11-09.at.12.37.40.AM.mp4

[JuliaHa0902]

@Anusha-Gali Thank you for the video, that helps!
@Anusha-Gali @Sriamshreddy000 @Vinay944924 I have fixed the scroll in Team Member Tasks table, can you test this PR again please?
Thank you!

[bhanuanishakkineni]

Hello Julia,
I have reviewed your PR and also checked PR #3537. I checked out to this branch and logged in as a owner. I have tested all the below tasks in mobile view (Find testing in below screen recording)
Verify that Tasks and Timelogs table is expanded to the full screen.
Verify that Tasks and Timelogs table is scrollable and you can see all user tasks.
Verify that Leaderboard is scrollable horizontally
In Leaderboard, click on the timebar of an individual. Verify that Back to Top button doesn't cover the Edit button
In Team Member Tasks table, click on a task of a member. Verify that you can scroll horizontally to see all information of the task
Click on Add Intangible Time Entry. Verify that the placeholder disappears when you click on the Rich Text input field
Add Tangible Time Entry and Weekly Summary. Verify that the placeholder disappears when you click on the Rich Text input field.
Verify that it is easy to add and edit Tangible and Intangible time entry in mobile
Go to Projects page by clicking on Other Links > Projects
Verify that Add New Project button shows in mobile
Verify that Back to Top button doesn't cover any information when you scroll to the bottom of the page.
Click on WBS button
Verify that you can see the project name
Verify that the table is expanded to the full width
Click on a task
Verify that you can see all the information of the table by scrolling right/left
Verify that all the buttons are visible, no button is cut off
Click on Edit and verify that all button is properly shown
Review in Dark mode and Light mode

All the requirements are met and the app is responsive for a mobile device.
Apart from the above requirements, I have also tested the requirements form description image provided in the PR. In those, I found one issue that is, while adding a task in WBS, it is not possible to add start date and end date as the calendar isn't responsive in the mobile screen. Please check the screenshot below.

[sonarqubecloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.7% Duplication on New Code

See analysis details on SonarQube Cloud

[JuliaHa0902]

@bhanuanishakkineni Hi, I have fixed the issue with the calendar. Can you please test this PR again?

[bhanuanishakkineni]

@bhanuanishakkineni Hi, I have fixed the issue with the calendar. Can you please test this PR again?

Hello Julia,
I have retested this PR. I am sorry if the earlier comment about the responsiveness is unclear. I understood that after I rechecked it.
When I mean responsiveness in the sense that the calendar container is not shrinking according to mobile screen. Which makes it hard to select any other dates that are not displayed on the screen, find the screenshot below to understand. The calendar in mobile screen is rigid and large.

[JuliaHa0902]

Hi @bhanuanishakkineni, just to confirm: would you mind check out to this branch and do a git pull again before testing? I have pushed the new change that should have addressed the problem you mentioned

[bhanuanishakkineni]

Hello Julia,
I tested the PR by checking out and pulling the changes. Now the calendar is responsive and working as expected. I was able select start time and end time.

[Anusha-Gali]

@Anusha-Gali Thank you for the video, that helps! @Anusha-Gali I have fixed the scroll in Team Member Tasks table, can you test this PR again please? Thank you!

Hi Julia,

I have reviewed your PR locally and have verified that your have fixed the issue "In Team Member Tasks table, click on a task of a member. Verify that you can scroll horizontally to see all information of the task", as well as all the rest of the functionalities are working as per requirement.

[one-community]

Thank you all, merging!

[VijayAnirudh]

I checked out the branch, installed dependencies, cleared cache/site data, and ran the app locally while logged in as an admin/owner. Using the device toolbar to simulate mobile view, I verified all the intended changes described in the PR:

Dashboard:

Tasks & Timelogs table expands to full width and scrolls horizontally.

Leaderboard scrolls horizontally, and the “Back to Top” button does not overlap the Edit button.

Team Member Tasks table scrolls horizontally after clicking a task.

Placeholders in Tangible/Intangible Time Entry and Weekly Summary disappear correctly on focus.

Adding and editing time entries works smoothly in mobile view.

Projects:

“Add New Project” button is visible in mobile view.

“Back to Top” button does not cover content at the bottom.

WBS table expands to full width, project name is visible, and horizontal scrolling works.

All buttons (Edit/Delete/etc.) are properly visible and aligned.

General:

Layout is responsive across screen sizes.

Dark mode and light mode both render correctly.