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/components/marketing-mobile-menu.tsx
+++ b/apps/web/components/marketing-mobile-menu.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+
+const LINKS = [
+  { href: '/#how', label: 'How it works' },
+  { href: '/templates', label: 'Templates' },
+  { href: '/pricing', label: 'Pricing' },
+  { href: '/docs', label: 'Docs' },
+  { href: '/changelog', label: 'Changelog' },
+];
+
+/** Hamburger menu shown below the md breakpoint, where the inline nav is hidden. */
+export function MarketingMobileMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="md:hidden">
+      <button
+        type="button"
+        aria-label={open ? 'Close menu' : 'Open menu'}
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="flex size-8 items-center justify-center rounded-md text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+      >
+        {open ? <X size={18} /> : <Menu size={18} />}
+      </button>
+      {open && (
+        <div className="absolute inset-x-0 top-12 border-b border-[--color-border] bg-[--color-bg]/95 backdrop-blur-md">
+          <nav className="mx-auto flex max-w-6xl flex-col px-6">
+            {LINKS.map((l) => (
+              <Link
+                key={l.href}
+                href={l.href}
+                onClick={() => setOpen(false)}
+                className="border-b border-[--color-border] py-3.5 text-[14px] text-[--color-fg-muted] transition-colors last:border-0 hover:text-[--color-fg]"
+              >
+                {l.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}