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

6
apps/web/app/docs/layout.tsx
View File

@@ -62,8 +62,8 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
</nav>
</div>
</header>
<div className="mx-auto flex w-full max-w-6xl flex-1 gap-12 px-6 py-10">
<aside className="w-[240px] shrink-0">
<div className="mx-auto flex w-full max-w-6xl flex-1 gap-8 px-5 py-8 sm:px-6 sm:py-10 lg:gap-12">
<aside className="hidden w-[240px] shrink-0 lg:block">
<nav className="sticky top-20 space-y-5">
{SECTIONS.map((section) => (
<div key={section.heading}>
@@ -86,7 +86,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
))}
</nav>
</aside>
<article className="prose prose-invert max-w-2xl flex-1">{children}</article>
<article className="prose prose-invert min-w-0 max-w-2xl flex-1">{children}</article>
</div>
</div>
);