Skip to content

Namitha : Fix alignment of Search Filters and Events sections#4923

Open
Namitha7070 wants to merge 1 commit intodevelopmentfrom
fix/align-search-filters-events-sections
Open

Namitha : Fix alignment of Search Filters and Events sections#4923
Namitha7070 wants to merge 1 commit intodevelopmentfrom
fix/align-search-filters-events-sections

Conversation

@Namitha7070
Copy link
Contributor

Description

image

Related PRS (if any):

Main changes explained:

  1. Added 60px top margin to Dates section - Pushes the Dates and Online filter groups down to align with the first row of event cards on the right
  2. Added 80px top margin to Branches section - Aligns Branches, Themes, and Categories filter groups with the second row of event cards, matching the Figma design
  3. Eliminated excessive vertical spacing - Removed the uneven spacing that caused the Search Filters container to extend beyond its intended boundary
  4. Achieved vertical alignment parity - Both the left sidebar (Search Filters) and right content area (Events grid) now maintain consistent vertical alignment throughout the page
  5. Resolved UI/UX design discrepancy - The layout now matches the approved Figma specifications with proper visual balance and spacing proportions between sections

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
  6. verify alignment between the Branches/Themes/Categories group aligns with the second row of event cards, matching the Figma design

Screenshots or videos of changes:

Week.30.mp4
Screenshot 2026-02-28 122718 Screenshot 2026-02-28 121320 Screenshot 2026-02-28 120544

@netlify
Copy link

netlify bot commented Feb 28, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 6382618
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69a352d9ffc8c40008f5ae4f
😎 Deploy Preview https://deploy-preview-4923--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant