Fix mobile portrait layout overflow and overlaps (#190)

* Fix mobile portrait layout overflow and overlaps

Reference names overlapped their descriptions, docs articles and cards ran wider than the screen, and the blog header took two to three sticky rows on phones.

* Keep wide blog tables and long inline code inside the post on phones

* Fix blog menu focus and landmarks, touch-sized selects and phone headings

* Keep blog menu open until focus lands outside it, for Safari clicks

Author: GuanzhouSong

app/ai/page.tsx

@@ -278,7 +278,7 @@ export default function AIPage() {
           </div>
 
           <div className="min-w-0 rounded-3xl border border-white/10 bg-neutral-900/90 p-5 shadow-[0_24px_80px_-40px_rgba(139,92,246,0.45)] sm:p-6">
-            <div className="mb-4 flex items-center justify-between gap-3">
+            <div className="mb-4 flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
               <span className="inline-flex rounded-full border border-violet-400/30 bg-violet-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-violet-200">
                 Quick start
               </span>
@@ -372,7 +372,7 @@ export default function AIPage() {
             {quickStartSteps.map((item) => (
               <article
                 key={item.step}
-                className="flex h-full flex-col rounded-3xl border border-neutral-800 bg-neutral-900/80 p-5 shadow-[0_24px_80px_-50px_rgba(139,92,246,0.45)] sm:p-6"
+                className="flex h-full min-w-0 flex-col rounded-3xl border border-neutral-800 bg-neutral-900/80 p-5 shadow-[0_24px_80px_-50px_rgba(139,92,246,0.45)] sm:p-6"
               >
                 <div className="mb-4 flex items-center gap-3">
                   <span className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-violet-400/30 bg-violet-500/10 text-xs font-semibold text-violet-200">

app/components/Breadcrumb.tsx

@@ -7,8 +7,9 @@ export default function Breadcrumb({ type, category, name }: {
     category?: string;
     name?: string;
 }) {
+    // The separator spans carry no spaces, so without flex-wrap a long trail never breaks
     return (
-        <nav className="mb-6 text-sm text-gray-400">
+        <nav className="mb-6 flex flex-wrap items-center gap-y-1 text-sm text-gray-400">
             <Link href="/docs/reference" className="hover:text-blue-400 transition-colors">
                 Reference
             </Link>

app/components/ComingSoon.tsx

@@ -2,7 +2,7 @@ export default function ComingSoon() {
   return (
     <div className="relative mb-8">
       {/* Main container with glow effect */}
-      <div className="relative w-80 h-80 mx-auto">
+      <div className="relative w-full max-w-80 h-80 mx-auto">
         {/* Background glow */}
         <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-cyan-500/20 rounded-2xl blur-xl"></div>
 

app/components/Grid.tsx

@@ -12,8 +12,9 @@ export default function Grid({ items }: {
           key={page.reference}
           className="bg-neutral-900/30 rounded-lg p-4 border border-neutral-600/20 text-left hover:border-blue-500/40 hover:bg-neutral-700/30 transition-all duration-200 group"
           href={`/docs/reference/${page.reference}`}>
-          <div className="grid md:grid-cols-[20%_80%] grid-cols-[10%_90%] mb-2">
-            <h4 className="text-blue-300 font-mono font-medium group-hover:text-blue-200">
+          {/* Stack until there is room for a fixed column wide enough for $setWindowFields */}
+          <div className="grid gap-1 lg:grid-cols-[12rem_minmax(0,1fr)] lg:gap-0 mb-2">
+            <h4 className="text-blue-300 font-mono font-medium group-hover:text-blue-200 break-words">
               {page.name}
             </h4>
             <p className="text-xs text-gray-400 italic">

app/components/Markdown.tsx

@@ -44,7 +44,7 @@ export default function Markdown({ content, sourcePath }: MarkdownProps) {
         elements.push(
           <div key={`section-${index}`} className="bg-neutral-800/50 backdrop-blur-sm rounded-lg border border-neutral-700/50 p-6">
             <a className="invisible scroll-mt-24" id={headingAnchor(title)} />
-            <h2 className="text-2xl font-semibold text-white mb-4">
+            <h2 className="text-xl sm:text-2xl font-semibold text-white mb-4">
               {title}
             </h2>
             <ReactMarkdown
@@ -61,15 +61,16 @@ export default function Markdown({ content, sourcePath }: MarkdownProps) {
     return elements;
   }, [content, sourcePath]);
 
-  return <div className="space-y-8">{processedContent}</div>;
+  // Long inline code, URLs and identifiers would otherwise push the article wider than a phone
+  return <div className="space-y-8 break-words">{processedContent}</div>;
 }
 
 function getMarkdownComponents(sourcePath: string) {
   return {
     // H1 headings (main page title from Markdown content)
     h1: ({ children, ...props }: any) => (
       <>
-        <h1 className="text-4xl font-bold text-white mb-4" {...props}>
+        <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4" {...props}>
           {children}
         </h1>
         <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 rounded-full mb-6"></div>

app/docs/[section]/[[...slug]]/page.tsx

@@ -229,7 +229,7 @@ export default async function ArticlePage({ params }: PageProps) {
 
                         {/* Coming Soon Component for coming-soon layout */}
                         {showComingSoonHeading && (
-                            <h1 className="text-4xl font-bold text-white mb-4">
+                            <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4">
                                 {pageTitle}
                             </h1>
                         )}
@@ -262,8 +262,9 @@ export default async function ArticlePage({ params }: PageProps) {
                                             </p>
                                         </div>
                                     </div>
+                                    {/* min-w-0 stops the command's longest line from sizing the column */}
                                     <div className="grid gap-4 lg:grid-cols-2">
-                                        <div className="rounded-xl border border-neutral-800 bg-neutral-900/70 p-4">
+                                        <div className="min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/70 p-4">
                                             <p className="text-sm font-semibold text-white">
                                                 Run locally with Docker
                                             </p>
@@ -282,7 +283,7 @@ export default async function ArticlePage({ params }: PageProps) {
                                                 </Link>
                                             </div>
                                         </div>
-                                        <div className="rounded-xl border border-neutral-800 bg-neutral-900/70 p-4">
+                                        <div className="min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/70 p-4">
                                             <p className="text-sm font-semibold text-white">
                                                 Install from Linux packages
                                             </p>

app/docs/reference/[type]/[category]/page.tsx

@@ -39,7 +39,7 @@ export default async function CommandReferencePage({ params }: { params: Promise
     <article>
       <Breadcrumb type={type} category={category} />
       <div className="mb-8">
-        <h1 className="text-4xl font-bold text-white mb-4 capitalize">
+        <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4 capitalize">
           MongoDB Query Language (MQL) {capitalCase(category)} {capitalCase(pluralize(type))}
         </h1>
         <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 rounded-full mb-6"></div>

app/docs/reference/[type]/page.tsx

@@ -38,7 +38,7 @@ export default async function CommandReferencePage({ params }: { params: Promise
     <article>
       <Breadcrumb type={type} />
       <div className="mb-8">
-        <h1 className="text-4xl font-bold text-white mb-4 capitalize">
+        <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4 capitalize">
           MongoDB Query Language (MQL) {capitalCase(pluralize(type))}
         </h1>
         <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 rounded-full mb-6"></div>

app/docs/reference/layout.tsx

@@ -17,8 +17,9 @@ export default function ReferenceLayout({
 }>) {
   const groupedReferences = getReferencesGroupedByTypeAndCategory();
 
+  // Phones get no sidebar, so the page scrolls rather than a 100vh pane half under the navbar
   return (
-    <div className="min-h-screen bg-neutral-900 relative overflow-hidden max-h-screen">
+    <div className="min-h-screen bg-neutral-900 relative overflow-hidden md:max-h-screen">
       {/* Background elements */}
       <div className="absolute inset-0 bg-gradient-to-br from-neutral-900 via-neutral-800 to-black"></div>
       <div className="absolute inset-0 opacity-5">
@@ -28,7 +29,7 @@ export default function ReferenceLayout({
           style={{ animationDelay: "1.5s" }}
         ></div>
       </div>
-      <div className="relative flex h-screen">
+      <div className="relative flex md:h-screen">
         {/* Sidebar (desktop only; mobile gets the disclosure below) */}
         <div className="hidden w-80 bg-neutral-800/50 backdrop-blur-sm border-r border-neutral-700/50 md:flex flex-col h-full">
           <div className="p-6 border-b border-neutral-700/50 flex-shrink-0">
@@ -52,7 +53,7 @@ export default function ReferenceLayout({
           </div>
           <Index groupedReferences={groupedReferences} />
         </div>
-        <article className="flex-1 p-4 sm:p-8 overflow-y-auto h-full">
+        <article className="min-w-0 flex-1 p-4 sm:p-8 md:h-full md:overflow-y-auto">
           <div className="max-w-4xl">
             {/* Mobile reference navigation */}
             <details className="mb-6 rounded-lg border border-neutral-700/50 bg-neutral-800/50 md:hidden">

app/docs/reference/page.tsx

@@ -24,7 +24,7 @@ export default function Home() {
     <article>
       <Breadcrumb />
       <div className="mb-8">
-        <h1 className="text-4xl font-bold text-white mb-4">
+        <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4">
           MongoDB Query Language (MQL)
         </h1>
         <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 rounded-full mb-6"></div>