fix: blog list view card layout and image styling

[rishiraj38]

Description

This PR fixes Blog list view.

Notes for Reviewers

Root cause: The Card component (Card.style.js) has flex-direction: column and min-height: 23rem hardcoded on .post-block. The BlogList wrapper tried to override these from the parent, but it couldn't win because styled-components scopes the Card's styles with a unique class, so the Card's own column layout always takes priority over the parent's overrides.

Signed commits

• Yes, I signed my commits.

[github-actions]

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-05-20 15:38 UTC

[rishiraj38]

Before

• Announcement Page

  

• Blog Page in List View

  

After

• Announcement Page

  

• Blog Page in List View

  

[saurabhraghuvanshii]

@rishiraj38 Please don't use !important, try to find root cause.

[rishiraj38]

The Card component hardcodes flex-direction: column in its own styled-component (CardWrapper). The BlogList wrapper's CSS can't override it because styled-components' scoped class has equal/higher specificity. Fix: pass a listView prop to Card so it conditionally renders flex-direction: row from within its own styles.

[Bhumikagarggg]

@rishiraj38 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[rishiraj38]

@Rajesh-Nagarajan-11 I think my voice wasn't clear, so here’s the main Crux:

The Card component hardcodes flex-direction: column inside its own styled-component (CardWrapper). Because of styled-components scoping and specificity, the CSS from the BlogList wrapper cannot reliably override those styles.

The fix is to pass a listView prop to the Card component and conditionally applyflex-direction: rowdirectly inside CardWrapper itself.

Also, the CSS removed from blogList.style.js was mainly added to override the CardWrapper styles for list view rendering. Since list view handling now exists directly inside the Card component, those overrides are no longer needed.

[rishiraj38]

@Rajesh-Nagarajan-11, any more changes required?

LGTM