Namitha: Fixed number alignment in Most Popular Event chart and convert to CSS modules

[Namitha7070]

Description

(PRIORITY Low) Keerthana: Phase 3 – Number Alignment Differs in “Most Popular Event” Graph
Fixed number alignment issue in the "Most Popular Event" chart where percentage and count values were not properly aligned in a vertical column on the right side as specified in the Figma design. Additionally, migrated the component to use CSS Modules for better style encapsulation.

Related PRS (if any):

…

Main changes explained:

1. Updated EvenStats to implement proper grid layout for the chart, ensuring percentage values (e.g., 80% (20/25)) are aligned in a fixed vertical column on the right side of each bar.
2. Updated EvenStats to import and use CSS Modules syntax
3. Created [EventStats.module] with camelCase class names following CSS Modules convention
4. Updated [EventStats.module] to use CSS Grid layout for proper three-column alignment (label | bar | value)
5. Deleted old [EventStats.CSS] file as it has been replaced by the CSS Module version
6. Updated all className references in the component to use the new CSS Modules pattern for both light and dark mode styling

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. go to dashboard→ /communityportal/reports/event/personalization
6. verify function “A” (feel free to include screenshot here)
7. verify this new feature works in [dark mode] and smaller screens

Screenshots or videos of changes:

Week.20.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4d82267
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/699f96b636e095000890efb4
😎 Deploy Preview	https://deploy-preview-4588--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]

Quality Gate passed

Issues
0 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

[Anusha-Gali]

Hi Namitha,

I have reviewed your PR locally and though the functionality works as requirements in both the modes. The tiles are not visible in responsiveness below 768px.

4588.mp4

[rohanrastogi311]

Hi Namitha,

Wel done. Fully functional on full screen.

[Namitha7070]

> Hi Namitha, > > I have reviewed your PR locally and though the functionality works as requirements in both the modes. The tiles are not visible in responsiveness below 768px. > > 4588.mp4 >

Hi Anusha, I have fixed the page responsiveness below 768px. Can you review it?

Recording.2026-02-20.164238.mp4

[Anusha-Gali]

Hi Namitha,

Thanks for fixing the issue. I am able to see the KPI's in smaller screens.

[sonarqubecloud]

Quality Gate passed

Issues
0 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

[one-community]

Thank you all, merging!