fix(web): mobile-responsive hero, marketing site, docs and dashboard

- Hero h1 was a fixed text-[44px] — overflowed narrow phones. Now text-[30px] sm:text-[40px] md:text-[56px]. - Hero grid children get min-w-0 so the code blocks' overflow-x-auto actually constrains instead of widening the page. - Marketing nav: the inline links were hidden below md with no fallback. Added a hamburger MobileMenu; "Sign in" collapses into it on the smallest screens. - Section vertical padding is now responsive (py-14 sm:py-20). - globals.css: overflow-x: clip on <html> as a safety net. - docs: the 240px sidebar is hidden below lg, article gets min-w-0. - dashboard header: nav labels collapse to icons on small screens. Verified: next build passes (40/40 pages). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 23:25:26 +02:00
parent 2e5bf5b44b
commit 88c7262a08
6 changed files with 80 additions and 24 deletions
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -1,11 +1,12 @@
-import Link from 'next/link';
 import { Logo } from '@/components/logo';
+import { MarketingMobileMenu } from '@/components/marketing-mobile-menu';
+import Link from 'next/link';

 export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/80 backdrop-blur-md">
-        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
+        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-5 sm:px-6">
          <div className="flex items-center gap-6">
            <Logo />
            <nav className="hidden items-center gap-5 text-[13px] text-[--color-fg-muted] md:flex">
@@ -26,10 +27,10 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
              </Link>
            </nav>
          </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5 sm:gap-2">
            <Link
              href="/login"
-              className="rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+              className="hidden rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg] sm:block"
            >
              Sign in
            </Link>
@@ -39,13 +40,17 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
            >
              Start building
            </Link>
+            <MarketingMobileMenu />
          </div>
        </div>
      </header>
      <main className="flex-1">{children}</main>
      <footer className="border-t border-[--color-border] py-8">
        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
-          <Link href="/status" className="flex items-center gap-2 transition-colors hover:text-[--color-fg]">
+          <Link
+            href="/status"
+            className="flex items-center gap-2 transition-colors hover:text-[--color-fg]"
+          >
            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
            <span>System status</span>
          </Link>
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -85,12 +85,12 @@ export default function Landing() {
    <>
      {/* Hero */}
      <section className="relative border-b border-[--color-border]">
-        <div className="mx-auto grid max-w-6xl gap-12 px-6 py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:py-28">
-          <div>
+        <div className="mx-auto grid max-w-6xl gap-10 px-6 py-14 sm:py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12 md:py-28">
+          <div className="min-w-0">
            <span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
              v0.1 — updated 2026-05-20
            </span>
-            <h1 className="mt-6 text-balance text-[44px] font-semibold leading-[1.05] tracking-tight md:text-[56px]">
+            <h1 className="mt-6 text-balance text-[30px] font-semibold leading-[1.06] tracking-tight sm:text-[40px] md:text-[56px]">
              Describe your tool.
              <br />
              We host the server.
@@ -131,7 +131,7 @@ export default function Landing() {
            </div>
          </div>

-          <div className="relative">
+          <div className="relative min-w-0">
            <div className="absolute -inset-px rounded-lg border border-[--color-border-strong]" />
            <div className="space-y-3">
              <CodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
@@ -143,7 +143,7 @@ export default function Landing() {
      </section>

      {/* How it works */}
-      <section id="how" className="border-b border-[--color-border] py-20">
+      <section id="how" className="border-b border-[--color-border] py-14 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mb-12 max-w-2xl">
            <h2 className="text-[28px] font-semibold tracking-tight">How it works</h2>
@@ -182,7 +182,7 @@ export default function Landing() {
      </section>

      {/* Works with */}
-      <section className="border-b border-[--color-border] py-16">
+      <section className="border-b border-[--color-border] py-12 sm:py-16">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-center text-[13px] uppercase tracking-[0.18em] text-[--color-fg-subtle]">
            Works with the clients you already use
@@ -199,7 +199,7 @@ export default function Landing() {
      </section>

      {/* Examples */}
-      <section className="border-b border-[--color-border] py-20">
+      <section className="border-b border-[--color-border] py-14 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mb-10 max-w-2xl">
            <h2 className="text-[28px] font-semibold tracking-tight">
@@ -226,7 +226,7 @@ export default function Landing() {
      </section>

      {/* Marketplace */}
-      <section className="border-b border-[--color-border] py-20">
+      <section className="border-b border-[--color-border] py-14 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
            <div className="max-w-2xl">
@@ -257,7 +257,7 @@ export default function Landing() {
      </section>

      {/* Pricing */}
-      <section id="pricing" className="border-b border-[--color-border] py-20">
+      <section id="pricing" className="border-b border-[--color-border] py-14 sm:py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mb-10 max-w-2xl">
            <h2 className="text-[28px] font-semibold tracking-tight">Pricing</h2>
@@ -290,7 +290,7 @@ export default function Landing() {
      </section>

      {/* FAQ */}
-      <section className="py-20">
+      <section className="py-14 sm:py-20">
        <JsonLd data={faqJsonLd()} />
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-[28px] font-semibold tracking-tight">FAQ</h2>