Amaan - Fix scrollbar/clip artifact on Project Status cards – Total Construction Summary Report

[AmaanSyed09]

Description

Fixes the Project Status card overflow, clipping, readability, and responsive layout issues in the Total Construction Summary Report.

The original issue caused text and values inside the Project Status summary cards to overflow beyond their intended boundaries, affecting readability and alignment. The cards also became too narrow at intermediate viewport widths because of fixed breakpoint column rules, resulting in clipped titles, values, and week-over-week text.

Additional testing identified that longer values such as $27.6K and $18.4K could extend outside their value pills. Dark mode also replaced the individual Project Status card colors with a uniform dark background and introduced poor text contrast against the existing pastel value pills.

This hotfix keeps the Project Status cards properly contained and responsive across desktop, tablet, intermediate, and mobile viewport widths, allows value pills to accommodate longer values, and preserves readable Project Status card styling in both light and dark mode.

The original task also notes that the Reporting page may become non-responsive when selecting comparison options other than "No Comparison". In the current implementation, the comparison-period dropdown only provides the previous completed week and does not provide a "No Comparison" or alternative comparison option, so this behavior could not currently be reproduced. The changes remain scoped to the Project Status section of the Total Construction Summary Report.

Fixes (Priority Medium) – Fix scrollbar/clip artifact on Project Status cards – Total Construction Summary Report.

Related PRS (if any):

Previous hotfix: PR #5388

Main changes explained:

• Updated the Project Status grid to use fluid responsive column sizing with auto-fit and minmax() instead of conflicting fixed column counts at multiple breakpoints.
• Removed the fixed maximum width from individual Project Status cards so cards can properly fill their available grid tracks.
• Added min-width: 0 to prevent card content from forcing grid tracks beyond their available width.
• Updated the Project Status grid to span the full parent category content area so it is not squeezed into a single parent grid column at tablet widths.
• Removed redundant Project Status breakpoint overrides that caused inconsistent transitions between viewport sizes.
• Preserved the individual Project Status card background colors in dark mode instead of overriding all cards with the same dark background.
• Updated Project Status titles, values, and week-over-week text for clear readability against the preserved pastel card backgrounds in dark mode.
• Replaced the fixed value-pill width with flexible sizing so longer values such as $27.6K and $18.4K remain contained within their pills.
• Kept all changes scoped to WeeklyProjectSummary.module.css without modifying unrelated components or application-wide styling.

How to test:

1. Checkout the current PR branch:
   git checkout amaan-fix-project-status-responsive-cards
2. Run npm install if dependencies are not already installed.
3. Run npm run start:local.
4. Log in as a Manager/Admin user.
5. Navigate to Reports → Total Construction Summary.
6. Expand the Project Status section.
7. Verify all Project Status card titles, values, and week-over-week text remain contained within their cards.
8. Resize the viewport gradually from large desktop widths through tablet and mobile widths.
9. Verify the cards transition smoothly between the available column counts without clipping, overflow, or broken intermediate layouts.
10. Verify cards properly use the available section width at tablet and mobile sizes.
11. Verify the Project Status section remains functional and visually correct in both light and dark mode.

Screenshots or videos of changes:

Before

After

pr5516demo_2.mov

Note:

The changes are scoped to the Project Status cards within the Total Construction Summary Report. They address responsive card layout and clipping, dark-mode card colors and text readability, and value-pill sizing for longer values. No global styles, chart logic, backend functionality, or unrelated components were modified.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	fb3ab92
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aa993ec083f6d00082d6732
😎 Deploy Preview	https://deploy-preview-5516--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[AmaanSyed09]

Addressed the remaining issues.

Updated the Comparison Period functionality in the Total Construction Summary Report to follow the Total Organization Summary comparison control as the reference. Added No Comparison, Week Over Week, Month Over Month, and Year Over Year options with matching dropdown styling and interaction behavior. The selected comparison mode now updates the applicable comparison-period display, while No Comparison removes comparison-specific text. The existing Project Status card values and percentage values were preserved because these have been static, hard-coded values since the original implementation and are not currently calculated from report-period data or an API. This change therefore preserves the original Project Status data behavior rather than introducing unrelated data-source changes.

Tested each comparison option individually and confirmed that switching between No Comparison, Week Over Week, Month Over Month, and Year Over Year works without causing the reporting page to become non-responsive. Also verified the existing Project and Current Period dropdowns and Share PDF control continue to function correctly, and tested the updated Total Construction Summary header and Project Status section across desktop, intermediate, and mobile viewport sizes in both light and dark mode. The previously completed Project Status responsive, dark-mode, and value-sizing fixes remain intact.

Ready for Review.

[devangsaraogi]

Hi @AmaanSyed09,

Tested the current PR head locally on the Total Construction Summary Project Status section. Both light and dark modes and viewport widths across desktop, tablet and mobile.

The responsive card changes are working well.

• card titles and values remain contained
• longer values such as $27.6K and $18.4K fit within their value pills
• the cards reflow correctly at narrower widths and
• the updated dark mode styling remains readable

I found one issue with the new comparison-period options. I left an inline comment with testing evidence. Week Over Week, Month Over Month, Year Over Year display the same percentage values while only the comparison label changes. The monthly and yearly selections currently present the existing weekly percentages as if they were calculated for those periods.

I also compared the header date-range clipping against the PR’s base commit and confirmed that behavior was already present before this PR. I am not treating it as a regression here.

Requesting changes for the comparison-period percentage behavior.

Thanks!

[devangsaraogi]

The new comparison options appear to relabel the existing week-over-week percentages rather than calculate values for the selected comparison period.

I reproduced this locally on the current PR head. For example, Total Projects remains +16% for Week Over Week, Month Over Month and Year Over Year. Only the comparison text changes. The same behavior occurs across the other Project Status cards.

Since these values are still hard-coded as week-over-week percentages, displaying them as month-over-month or year-over-year makes the selected comparison appear to contain calculated data when the underlying percentage has not changed.

Could these percentages be calculated from the selected comparison period or otherwise avoid displaying them for comparison modes where corresponding values are not available?

[iAbhi001]

Hi @AmaanSyed09,

Tested locally across desktop, tablet, and mobile in both light and dark modes.

What works well:

• Card layout, responsiveness, and dark-mode contrast look great.
• Longer values ($27.6K, $18.4K) fit inside the pills without clipping.
• Switching comparison modes runs smoothly without freezing the UI.

Required change:

• Echoing @devangsaraogi's note: toggling between Week Over Week, Month Over Month, and Year Over Year keeps the same percentage value (e.g., +16%) and only swaps the label, which looks misleading.

Please either calculate the true deltas for MoM/YoY, or hide the percentage/restrict options until that data is supported.

Once resolved, this should be good to merge. Thanks!

[AmaanSyed09]

Hi @iAbhi001 @devangsaraogi

Please see my detailed comment above regarding this behavior. As noted there, the Project Status card values and percentages are hard-coded in the existing frontend implementation and are not currently calculated from report-period data or an API.

The dynamic comparison values require separate backend/API changes and will be addressed separately. The current PR preserves the existing static Project Status data behavior.

Thanks!

[sonarqubecloud]

Quality Gate failed

Failed conditions
7.4% Duplication on New Code (required ≤ 3%)
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE