Layout wireframe

social-feed

Three-column viewport-locked social media layout. Fixed top nav, scrolling sidebars, center feed with constrained max-width content. The defining feature: feed items are centered with max-w-2xl so they don't stretch uncomfortably wide. Annotations in grey are the real Tailwind values.

Desktop · ≥ lg (1024px+)

<brand / logo>
<notifications>
👤

header · h-14 · sticky top-0 · never scrolls

main · flex-1 min-w-0 overflow-y-auto — PRIMARY SCROLL

Content wrapper: max-w-2xl mx-auto — this constraint keeps posts readable

<feed item: post content>
<image or media>
❤️
💬
<embedded content>
↓ scroll to verify: top nav stays put, sidebars scroll independently ↓
Feed continues...

Responsive behaviour

Mobile · < md (768px)

<center feed only> max-w-full · px-4

Sidebars hidden. Hamburger opens left nav as overlay.

Tablet · md–lg (768–1024px)

<feed>

Left sidebar: icons only (w-14) or hidden. Right sidebar hidden.

Desktop · ≥ lg (1024px+)

<feed max-w-2xl>

Full three-column layout. Left w-64, center flex-1, right w-80.

Independent scroll regions

The shell is viewport-locked at h-screen overflow-hidden. The page never scrolls as a whole. Instead, three regions scroll independently:

← Left Sidebar

overflow-y-auto on its nav container. Scrolls when navigation items exceed viewport height.

↕ Center Feed

PRIMARY SCROLL REGION — overflow-y-auto on main element. Feed content constrained to max-w-2xl mx-auto.

→ Right Sidebar

overflow-y-auto on its container. Widgets and suggestions scroll independently.

⊼ Top Navigation

sticky top-0 — never scrolls, always visible. This is what makes it a social feed layout rather than a document layout.