fix(blog): stack featured posts vertically on mobile to prevent horizontal overflow

[waleedlatif1]

Summary

• Featured posts on the blog index were rendered in a horizontal flex row with no mobile breakpoint, causing all 3 cards to be forced side-by-side on small screens
• This created horizontal overflow that shifted the entire page, clipping the header content on the left
• Fixed by stacking posts vertically on mobile (flex-col) and switching to horizontal layout at sm breakpoint, with border logic updated to match

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

PR Summary

Low Risk
Low risk UI-only change that adjusts responsive layout/border classes for featured blog cards; no data, auth, or routing logic is modified.

Overview
Fixes mobile horizontal overflow on the blog index by rendering the featured posts stack as a column on small screens and switching back to a row at the sm breakpoint.

Updates the featured card border styling to use top borders in the stacked layout and left borders in the horizontal layout (including first-item border rules) to keep dividers consistent across breakpoints.

^{Reviewed by Cursor Bugbot for commit 5a9f42a. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 7, 2026 3:38pm

[greptile-apps]

Greptile Summary

This PR fixes a mobile overflow bug on the blog index page where featured posts were rendered in a bare flex row with no mobile breakpoint, forcing all three cards side-by-side on small screens and causing horizontal overflow that clipped the header.

• Changes the featured-posts container from flex to flex flex-col sm:flex-row so cards stack vertically on mobile and switch to a row at the sm breakpoint
• Updates border logic from md:border-l md:first:border-l-0 to border-t first:border-t-0 sm:border-t-0 sm:border-l sm:first:border-l-0, rendering horizontal top-border separators for the stacked layout on mobile and vertical left-border separators for the row layout at sm+
• The sm breakpoint choice is intentional and consistent with other sm:-gated elements in the same file (e.g. the thumbnail image in the remaining-posts list uses sm:block)

Confidence Score: 5/5

Safe to merge — minimal, correct two-line Tailwind responsive layout fix with no logic changes

The change is a textbook mobile-first responsive fix. Border logic at both orientations is correct: top-border separators for the vertical mobile stack, left-border separators for the horizontal sm+ row. No logic, data, or API changes are present; all P2 findings would be style-only and none were found.

No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/(landing)/blog/page.tsx	Adds responsive flex-col/flex-row layout for featured posts with corrected sm-breakpoint border logic to fix mobile horizontal overflow

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Blog Page Load] --> B{featured.length > 0?}
    B -->|Yes| C[Render featured posts container]
    C --> D{Viewport width}
    D -->|less than sm| E[flex-col: vertical stack\nborder-t separators\nfirst:border-t-0]
    D -->|sm and above| F[flex-row: horizontal row\nsm:border-l separators\nsm:first:border-l-0]
    B -->|No| G[Skip featured section]
    E --> H[Render remaining posts list]
    F --> H
    G --> H

Loading

_{Reviews (1): Last reviewed commit: "fix(blog): stack featured posts vertical..." | Re-trigger Greptile}