marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): mobile-responsive hero, marketing site, docs and dashboard
All checks were successful
Deploy to Production / deploy (push) Successful in 1m13s
Details

Browse Source 
- 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>
This commit is contained in:
Marco Sadjadi
2026-05-21 23:25:26 +02:00
parent 2e5bf5b44b
commit 88c7262a08
6 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/app/(marketing)/layout.tsx
View File

@@ -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>