Layout patterns

Purpose: Defines layout standards for admin shell pages, including content max-width, overflow behavior, sticky panels, form input widths, and responsive breakpoints.

Standards for admin shell layout, content width constraints, and responsive behavior.

---

Content max-width

All admin page content is capped at max-w-[1400px] (1400px) via the shared admin layout wrapper. This prevents content from stretching across ultra-wide monitors, keeping forms readable and action buttons reachable.

Where it lives: app/(admin)/layout.tsx — the content <div> inside <SidebarInset>.

<SidebarInset>
  <div className="flex-1 p-4 max-w-[1400px]">
    {children}
  </div>
</SidebarInset>

Individual pages should NOT add their own max-w-* to the outer wrapper — the layout handles it globally.

---

No overflow-auto on content wrapper

The admin layout content wrapper must NOT have overflow-auto, overflow-hidden, or overflow-scroll. These create a new scroll container that breaks position: sticky for all descendant elements.

Let the browser handle scrolling at the viewport level. Pages that need internal scroll regions (e.g., code editors, data tables) should scope overflow to the specific element, not the layout.

---

Sticky panels

For side-by-side layouts with a sticky panel (e.g., live preview):

<div className="lg:sticky lg:top-4 lg:max-h-[calc(100svh-2rem)] lg:overflow-y-auto">
  {/* Sticky content */}
</div>

• lg:sticky lg:top-4 — Sticks at 1rem from top on desktop
• lg:max-h-[calc(100svh-2rem)] — Prevents overflow on short viewports
• lg:overflow-y-auto — Allows scrolling within the sticky panel if content exceeds viewport

Prerequisites: No ancestor between the sticky element and the viewport may have overflow: auto/hidden/scroll.

---

Form input widths

Short-value inputs (text fields, URLs, phone numbers) should be constrained to prevent stretching across the full content width:

Input type	Max width	Class
Color pickers	~140px (hex input)	max-w-[140px]
Text / URL / phone	~384px	max-w-sm
Select dropdowns	~384px	max-w-sm on trigger
Textareas / rich editors	Full width	No constraint

---

Responsive breakpoints

The admin shell follows standard Tailwind breakpoints:

Breakpoint	Width	Layout behavior
Default (mobile)	< 768px	Single column, sidebar collapsed
md	768px+	Sidebar visible, content adapts
lg	1024px+	Two-column layouts activate (e.g., form + preview)
Content cap	1400px	Content stops growing, stays left-aligned

---

Two-column form + preview

Pattern for settings pages with a live preview:

<div className="flex flex-col gap-8 lg:flex-row">
  {/* Left: form */}
  <div className="min-w-0 flex-1 space-y-6">
    {/* Form sections */}
  </div>

  {/* Right: sticky preview */}
  <div className="lg:w-[420px] lg:shrink-0">
    <div className="lg:sticky lg:top-4 lg:max-h-[calc(100svh-2rem)] lg:overflow-y-auto">
      {/* Preview content */}
    </div>
  </div>
</div>

• Mobile (< lg) — Single column, preview below form
• Desktop (lg+) — Side-by-side, preview sticks on scroll