fix: UI misalignment in All Events sidebar

[sphurthy]

Description

Related PRS (if any):

None

Main changes explained:

• Fixed filter sidebar alignment: added consistent 24px spacing between filter sections and aligned the sidebar with the top of the event card grid
• Fixed radio/checkbox alignment: resolved clipping and spacing issues for radio buttons and checkboxes
• Added dark mode support: integrated dark mode styles across the component (container, filters, inputs, event cards)
• Fixed accessibility: associated all form labels with their controls and wrapped select inputs within labels

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. Go to https://dev.highestgood.com/communityportal
5. Visual: Verify the filter sidebar aligns with the event card grid and has consistent spacing between sections
6. Dark mode: Toggle dark mode and confirm all components display correctly with proper contrast
7. Functionality: Test all filter inputs (radio buttons, checkbox, selects, date input) to ensure they work correctly
8. Accessibility: Use a screen reader and keyboard navigation to verify all inputs are properly labeled and accessible

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8bb3507
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6949dab21ed0120008b45b37
😎 Deploy Preview	https://deploy-preview-4605--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
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