fix: improve mobile layout for website and fix docs sidebar on mobile

[NathanFlurry]

Description

Improves mobile layout across the website and fixes the docs sidebar navigation not appearing in the mobile hamburger menu. These changes address viewport issues at 375px width and provide a better mobile experience overall.

Changes

• Docs sidebar on mobile: The sidebar data is now passed through the DocsLayout to the Header component and rendered in the mobile navigation drawer, allowing users to navigate docs on mobile
• Section padding: Reduced excessive vertical padding on landing page sections from 192px (py-48) to 48px (py-16) on mobile, only expanding to 192px on desktop
• Footer layout: Changed footer grid to single-column layout on screens under 440px width
• Features grid: Removed the three-column breakpoint so the grid only goes 1 → 2 → 4 columns, providing better spacing

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Tested at 375px viewport width:

• Verified docs sidebar now appears in hamburger menu on mobile
• Confirmed landing page sections no longer have excessive padding gaps
• Verified footer stacks properly on narrow screens
• Checked that Features grid displays correctly with only 1, 2, or 4 column layouts
• Tested desktop viewports (1024px, 1440px) to ensure no regressions

Co-Authored-By: Claude Haiku 4.5 noreply@anthropic.com

[railway-app]

🚅 Deployed to the rivet-pr-4379 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	✅ Success (View Logs)	Web	Mar 8, 2026 at 3:48 am
frontend-cloud	✅ Success (View Logs)	Web	Mar 8, 2026 at 3:46 am
frontend-inspector	✅ Success (View Logs)	Web	Mar 8, 2026 at 3:46 am
mcp-hub	✅ Success (View Logs)	Web	Mar 8, 2026 at 3:43 am
ladle	❌ Build Failed (View Logs)	Web	Mar 8, 2026 at 3:43 am

[claude]

PR Review

Overall this is a clean, well-scoped mobile UX improvement.

Unrelated Change

The kv-limits.ts type extension (adding start key and end key labels) is unrelated to mobile layout fixes and should be in its own PR or at least mentioned in the description. It is a small and correct change, but it makes the diff harder to review in context.

Header / Docs Sidebar on Mobile

The approach of passing sidebarData through DocsLayout -> Header -> DocsMobileNavigation is clean.

1. Performance: The full SidebarItem array is now serialized into the client-side bundle via client:load on Header. Depending on how large the sitemap can grow, this could add non-trivial bytes to the initial JS payload. Worth verifying the size of foundTab?.tab?.sidebar in the largest docs sections.

2. Fallback priority: The guard that renders sidebarData only when no tree slot is provided is correct — good defensive behavior.

3. Type improvement: Explicitly typing DocsMobileNavigation is strictly better than the previous implicit any.

Section Padding

The py-48 to py-16 md:py-48 change is applied consistently across HostingSection, IntegrationsSection, ObservabilitySection, RedesignedCTA, and SolutionsSection. If other landing page sections also use py-48 but are not covered here, they should be updated for consistency.

BuiltInFeatures Grid

Removing sm:grid-cols-3 means the grid jumps from 2 columns directly to 4 columns at lg. On screens between 640px and 1024px features render in 2 columns. This is a design call, but worth double-checking that 8 items in a 2-column grid does not look cramped in that range.

Footer

The custom breakpoint min-[440px] is consistent across Footer.jsx and BuiltInFeatures.tsx. Using items-start on mobile then centering at 440px for the investor badges row is a nice touch.

---

No blocking issues. The mobile sidebar fix is the meaningful change here and the implementation looks correct.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• ai-agent
• ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• collaborative-document
• collaborative-document-vercel
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• example-elysia
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• geo-distributed-database
• geo-distributed-database-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• example-multiplayer-game-patterns
• example-multiplayer-game-patterns-vercel
• multiplayer-game-vercel
• native-websockets
• native-websockets-vercel
• next-js
• per-tenant-database
• per-tenant-database-vercel
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• sandbox
• sandbox-coding-agent
• sandbox-coding-agent-vercel
• sandbox-vercel
• scheduling
• scheduling-vercel
• example-sqlite-drizzle
• example-sqlite-raw
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4379

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4379

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4379

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4379

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4379

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4379

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4379

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4379

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4379

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4379

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4379

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4379

commit: 1d0d303