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

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

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 24, 2026
Copy link
Copy Markdown

@HemanthNidamanuru HemanthNidamanuru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Namitha,

I tested this PR locally. The filters align correctly with the second row of event cards. One small observation though, the light grey placeholder block inside the event cards is not aligned properly in dark mode. I believe this may not be part of this PR, let me know if it comes under your scope.

Image Image

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

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants