Prem UI overlapping issue

[Prem203]

Description

Related PRS (if any):

This frontend PR is not related to any backend PR.
…

Main changes explained:

• Updated CPDashboard.jsx to fix UI allignment.
• Changed css file name to module.css
  …

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 /communityportal
6. verify the section under search filters

Screenshots or videos of changes:

Note:

Dark mode was not specified in the description.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	09ed377
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6927b76158a4100008ad1b84
😎 Deploy Preview	https://deploy-preview-4239--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
4 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

[Aswin20010]

Reviewed PR #4239(Community Portal Dashboard UI Alignment Fix). Verified updated alignment adjustments in CPDashboard.jsx. Checked layout consistency under search filters and overall visual stability. No UI or functional regressions found — approved the PR.

[apoorvajainrp21]

I tested the above functionality: 1. None of the drop-down buttons present options on selection. 2. No change in events after changing filters. 3. Show past events button does not yield anything. I have attached screenshots of my testing:

[Aditya-gam]

This PR successfully addresses UI alignment issues in the Community Portal dashboard through a well-executed migration to CSS Modules. The conversion from CPDashboard.css to CPDashboard.module.css follows React best practices for style encapsulation, preventing class name conflicts in the larger application.

• All className references correctly updated to bracket notation (styles['class-name'])
• Added filter-section-divider wrapper with flexbox layout to resolve the filter section alignment issue
• Removed fluid prop from Container, improving layout constraints with explicit max-width: 1400px
• Consistent formatting improvements (multi-line img attributes)

TestVideo.mov

Concerns:

• The CSS file contains global body styles, which defeats CSS Module scoping benefits
• Some commented-out CSS properties (/* margin-bottom: 20px; */) should be removed for cleaner code

[hemanthvenkat]

Verified PR as Admin user on /communityportal. The Search Filters section displays correctly — all filter options (Dates, Online, Branches, Themes, Categories) render properly with functional dropdowns and calendar input. Layout, contrast, and alignment look consistent across the interface. Overall, the feature works as expected.

[beblicarl]

This UI looks as intended

[Anusha-Gali]

Hi Prem,

I have reviewed your PR locally and all filter options (Dates, Online, Branches, Themes, Categories) render properly with functional dropdowns and calendar input. Layout, contrast, and alignment look consistent across the interface. But None of the drop-down buttons present various options on selection, similarly there is no change in events after changing filters nor the past events button does anything. Since this is a UI PR i will be approving but a bit more functionality would have been great.
https://github.com/user-attachments/assets/5ff08604-8d87-4b27-b9a5-cfdf85d75669

[one-community]

Thank you all, merging!

[sonarqubecloud]

Quality Gate passed

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