Juhitha fix people report page UI by Juhitha-Reddy · Pull Request #4635 · OneCommunityGlobal/HighestGoodNetworkApp

Juhitha-Reddy · 2025-12-27T14:05:07Z

Description

Fixed People Report page UI issues for mobile and narrow screens (375px and up). Improved table layout, column widths, and added comprehensive dark mode support for mobile card view and filter controls.

Fixes WBS: Fix PEOPLE REPORT PAGE UI issues for 375px and up (Juhitha Reddy Penumalli)

Related PRS (if any):

Reference to Previous PR #2005, PR #2650

Main changes explained:

Renamed PeopleTableDetails.css → PeopleTableDetails.module.css to comply with project CSS modules convention
Updated PeopleTableDetails.jsx to use CSS modules syntax for all className references
Widened Task column from 2.2fr to 3.5fr to display longer task names properly
Reduced other column widths (Priority, Status, Start Date, End Date from 1fr to 0.8fr) for better space utilization
Fixed column alignment by:
- Removing justify-content: space-between
- Adding gap: 0 to grid layout
- Standardizing padding to 8px 16px
Added dark mode styling for mobile card view (< 1024px screens):
- Dark card backgrounds (#232946)
- Dark headers (#1C2541)
- Purple-blue status badges (#5A67D8)
- White text throughout
Added dark mode styling for "Clear Filters" button
Fixed profile picture sizing to 30px × 30px circles with proper spacing
Updated mock data to use colorful placeholder images with initials instead of default avatar
Updated test file to work with CSS modules (finding elements by content instead of class names)

How to test:

Check out current branch: Juhitha_fix_people_report_page_UI
Run npm install to ensure all dependencies are installed
Clear site data/cache in browser (DevTools → Application → Clear storage)
Run the app locally: npm start
Log in as Admin or Owner user
Navigate to: Reports → Reports → People tab
Click on any user name to view their report
Verify Desktop View (> 1024px):
- Task column is significantly wider than before
- Other columns (Priority, Status, Start Date, End Date) are narrower
- All columns align properly with their headers
- Profile pictures are small circles (30px)
- No white space/gaps between columns
Verify Mobile View (< 1024px):
- Resize browser window to less than 1024px width
- Tasks display as cards instead of table rows
- Each card shows all task information
Verify Dark Mode:
- Enable dark mode in application settings
- Desktop view: Check that table maintains proper dark mode colors
- Mobile view: Verify:
  - Cards have dark background (#232946)
  - Headers have darker background (#1C2541)
  - Status badges are purple-blue
  - All text is white and readable
  - "Clear Filters" button has dark background with white text
- Toggle filters and verify "Clear Filters" button has proper dark mode styling
Verify Filters:
- Test various filter combinations
- Click "Clear Filters" button - should reset all filters
- In dark mode, button should have dark background with white text

Screenshots or videos of changes:

Uploading Screen Recording 2025-12-19 at 1.48.58 PM.mov…

Desktop View - Light Mode:

Task column is wider
Columns properly aligned
Profile pictures sized correctly

Mobile View - Dark Mode:

Dark card backgrounds
White text
Proper contrast and readability

Clear Filters Button:

Light mode: White background, purple text
Dark mode: Dark background, white text

…le (375px+)

netlify · 2025-12-27T14:05:14Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`d29f73b`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d30b40adb79a0008b8a402
😎 Deploy Preview	https://deploy-preview-4635--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.

sonarqubecloud · 2025-12-27T14:06:06Z

Quality Gate passed

Issues
7 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

HemanthNidamanuru

Hi Juhitha,

While testing in dark mode, I noticed a couple of small UI things:

The page header text and person names were a bit hard to read due to low contrast.
The profile toggle/icon area on the right side also looks slightly off in dark mode. The circle outline and alignment feel a little inconsistent with the rest of the theme.

Could you please take a look at these in dark mode and adjust the styling for better consistency and contrast?

Thanks! Let me know once updated.

Juhitha-Reddy · 2026-03-02T06:05:45Z

Updated the dark mode.

HemanthNidamanuru

Hi Juhitha,

Thank you for working on the People Report page UI updates. I tested the PR locally by following the provided steps. Most of the layout changes look good.

However, in dark mode, the toggle under the hours donut chart has text appearing behind it, which affects visibility. Also, the Time Entries graph section appears to have a light background that does not match the rest of the dark theme. Please confirm if the graph styling is part of this PR.

Juhitha-Reddy · 2026-03-09T01:47:22Z

Hi @HemanthNidamanuru,
Thank you for testing the PR and for the feedback!
The scope of this ticket was focused on the table alignment and block layout adjustments on the People Report page. The two issues you mentioned — the toggle text visibility in dark mode and the Time Entries graph background not matching the dark theme — fall outside the scope of this PR.
Regarding the toggle text visibility, I believe this is a pre-existing component-level bug that was present before my changes. It would be best addressed as a separate bug ticket.
As for the Time Entries graph styling, that was not part of the ticket I picked up, so it was intentionally left untouched.

Happy to discuss further if needed!

Anusha-Gali

Hi Juhitha,

I have reviewed your PR locally and although most of the UI requirements have been satisfied, found two issues:

in dark mode we cannot see the text of the checkbox options
the profile image is not circular as per your mention in description
Issues

Working screenshots

HemanthNidamanuru

Here's the updated comment:

Hi Juhitha, thank you for working on these improvements! I reviewed your PR locally and while most of the UI requirements are met, I noticed a couple of issues:

In dark mode, the headings in "Tasks with Completed Hours" are not clearly visible
The dropdowns in "Tasks Contributed" appear misaligned
The profile picture is not displaying in a circle shape
The background is still appearing in light mode when dark mode is enabled

Anusha-Gali

Hi Juhitha,

I suppose the fixes broke the working functionality. Below are the issues found:

The profile picture is not displaying in a circle shape and the active/inactive circle does not seem to exist beside the picture
The dropdowns in "Tasks Contributed" appear misaligned and do not seem to work
Few of the dropdowns in "Tasks Contributed" are not visible in dark mode
The background is still appearing in light mode when dark mode is enabled
In dark mode, the headings in "Tasks with Completed Hours" are not clearly visible
The toggle is not visible in "Time Logged to Projects chart" in dark mode
The toggle is not visible in "Tasks with Completed Hours"
Mobile resolution needs fixing mainly in both the chart tabular data

penumalli-juhitha-reddy · 2026-04-06T01:13:51Z

Hi @Anusha-Gali, I have reverted the changes, as the previous description was a bit misleading.
The description based on the ticket requirements:
• Increase the width of the “Task” column, as it is currently too narrow.
• Reduce the width of the other columns.
• Adjust all columns to fit the full page width.
• Update the background and text colors of the Tasks table in dark mode (especially on smaller screens) to match the overall theme.

I believe these items are now resolved, along with the previously mentioned points.
Please have a look considering the scope of the ticket mentioned

penumalli-juhitha-reddy · 2026-04-06T01:17:43Z

@Anusha-Gali , @HemanthNidamanuru

The PR description was a bit misleading, and I had added a few points that were not part of the original requirements. Please refer to this comment for the correct ticket description.
• Increase the width of the “Task” column, as it is currently too narrow.
• Reduce the width of the other columns.
• Adjust all columns to fit the full page width.
• Update the background and text colors of the Tasks table in dark mode (especially on smaller screens) to match the overall theme.
I apologies for the confusion created

sonarqubecloud · 2026-04-06T01:25:23Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

HemanthNidamanuru

Hi Juhitha,

thank you for updating the instructions. I have reviewed your PR locally and noticed a few issues:

The status dropdown background and text color are not updated for dark mode.
The filter fields above the table appear misaligned.

Submitting request for changes as the previous approval was made by mistake.

HemanthNidamanuru

Hi Juhitha,

thank you for updating the instructions. I have reviewed your PR locally and noticed a few issues:

The status dropdown background and text color are not updated for dark mode.
The filter fields above the table appear misaligned.

Anusha-Gali

Hi Juhitha,

Thank you for the updated information. All points appear to have been met except of - Update the background and text colors of the Tasks table in dark mode (especially on smaller screens) to match the overall theme - the tasks table dropdown's are not adapted to dark mode.

rajanidi1999

Hi,
I reviewed the PR locally and verified the updates to the People Report page UI. The overall layout improvements look good and align well with the expected design

rithika-paii

Hi Juhita,
I reviewed PR #4635 and tested the People Report page locally in light mode, dark mode, desktop, and mobile views. The overall responsiveness and styling improvements work well, but I found a couple of issues/suggestions:
1. Filter/Search input issue: On my side, the text box is not accepting typed input properly, so I’m unable to use the field as expected. (See attached video)

PR.4635.-.Light.mode.changes.mov

2. Mobile alignment: The mobile view is generally responsive and usable, but some alignment could still be improved for a cleaner layout. (See attached video.)

PR.4635.-.Mobile.view.-.dark.mode.changes.mov

3. Bottom report option alignment: The 7 report option buttons/sections at the bottom (People / Teams / Projects area) do not appear well-aligned visually. Functionally, they work, but the layout feels uneven and could be improved for better UI consistency. (See attached screenshot.)

kunchalasireesha

Hi Juhitha, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

Juhitha-Reddy added 3 commits December 23, 2025 11:05

fix: People Report table column widths and dark mode styling for mobi…

cb5225a

…le (375px+)

fix: update PeopleTableDetails test for CSS modules

78ed23a

Merge branch 'development' into Juhitha_fix_people_report_page_UI

4847fa0

Fixe merge conflicts

6927c86

HemanthNidamanuru requested changes Mar 2, 2026

View reviewed changes

Juhitha-Reddy added 2 commits March 2, 2026 00:51

Updated dark mode UI for reports

0e31f5f

Updated dark mode UI for reports and updated css file

09c7db1

Juhitha-Reddy requested a review from HemanthNidamanuru March 2, 2026 06:06

HemanthNidamanuru requested changes Mar 4, 2026

View reviewed changes

Anusha-Gali suggested changes Mar 16, 2026

View reviewed changes

Juhitha-Reddy added 6 commits March 23, 2026 20:13

Fixed checkbox and updated profile picture shape to circle

2fc4830

Fixed lint errors

b6620a4

Merged development into local

77d3b53

Fixed lint

c8212a9

Fixed lint

fed9f41

Fixed unit test cases

199c1af

HemanthNidamanuru requested changes Mar 26, 2026

View reviewed changes

Anusha-Gali suggested changes Mar 29, 2026

View reviewed changes

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 6, 2026

Merge branch 'development' into Juhitha_fix_people_report_page_UI

d29f73b

HemanthNidamanuru previously approved these changes Apr 7, 2026

View reviewed changes

HemanthNidamanuru requested changes Apr 7, 2026

View reviewed changes

Anusha-Gali suggested changes Apr 9, 2026

View reviewed changes

rajanidi1999 approved these changes Apr 13, 2026

View reviewed changes

rithika-paii requested changes Apr 18, 2026

View reviewed changes

kunchalasireesha requested changes May 2, 2026

View reviewed changes

Uh oh!

Conversation

Juhitha-Reddy commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Desktop View - Light Mode:

Mobile View - Dark Mode:

Clear Filters Button:

Uh oh!

netlify Bot commented Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

sonarqubecloud Bot commented Dec 27, 2025

Quality Gate passed

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Juhitha-Reddy commented Mar 2, 2026

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Juhitha-Reddy commented Mar 9, 2026

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

penumalli-juhitha-reddy commented Apr 6, 2026

Uh oh!

penumalli-juhitha-reddy commented Apr 6, 2026

Uh oh!

sonarqubecloud Bot commented Apr 6, 2026

Quality Gate passed

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

rajanidi1999 left a comment

Choose a reason for hiding this comment

Uh oh!

rithika-paii left a comment

Choose a reason for hiding this comment

Uh oh!

kunchalasireesha left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Juhitha-Reddy commented Dec 27, 2025 •

edited

Loading

netlify Bot commented Dec 27, 2025 •

edited

Loading