Skip to content

Fix mobile portrait layout overflow and overlaps #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
guanzhousongmicrosoft wants to merge 4 commits into from
Closed

Fix mobile portrait layout overflow and overlaps #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0757d05
Fix mobile portrait layout overflow and overlaps
guanzhousongmicrosoft Sep 24, 2026
8b1a358
Keep wide blog tables and long inline code inside the post on phones
guanzhousongmicrosoft Sep 24, 2026
f8e7c8b
Fix blog menu focus and landmarks, touch-sized selects and phone head…
guanzhousongmicrosoft Sep 24, 2026
6c007c5
Keep blog menu open until focus lands outside it, for Safari clicks
guanzhousongmicrosoft Sep 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/ai/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
3 changes: 2 additions & 1 deletion app/components/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/components/ComingSoon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
5 changes: 3 additions & 2 deletions app/components/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
7 changes: 4 additions & 3 deletions app/components/Markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions app/docs/[section]/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/docs/reference/[type]/[category]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/docs/reference/[type]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions app/docs/reference/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion app/docs/reference/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 13 additions & 9 deletions app/packages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ const packageRoles = [
},
] as const;

// Touch screens get 16px selects in any orientation, since iOS zooms into smaller form fields
const finderSelectClass =
"mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100 pointer-coarse:text-base";

export default function PackagesPage() {
const release = useReleaseInfo();
const [method, setMethod] = useState<InstallMethod>("docker");
Expand Down Expand Up @@ -188,7 +192,7 @@ export default function PackagesPage() {
</div>
</section>

<section className="mb-8 rounded-xl border border-neutral-700 bg-neutral-800/70 p-6">
<section className="mb-8 rounded-xl border border-neutral-700 bg-neutral-800/70 p-4 sm:p-6">
<h2 className="mb-4 text-2xl font-bold text-white">
2. Copy and run this command
</h2>
Expand Down Expand Up @@ -247,7 +251,7 @@ export default function PackagesPage() {
<select
value={packageFamily}
onChange={(event) => setPackageFamily(event.target.value as PackageFamily)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
<option value="apt">APT (Ubuntu 24.04)</option>
<option value="rpm">RPM (EL9)</option>
Expand All @@ -260,7 +264,7 @@ export default function PackagesPage() {
<select
value={aptTarget}
onChange={(event) => setAptTarget(event.target.value as AptDistro)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
{Object.entries(aptTargetLabels).map(([value, label]) => (
<option key={value} value={value}>
Expand All @@ -275,7 +279,7 @@ export default function PackagesPage() {
<select
value={rpmTarget}
onChange={(event) => setRpmTarget(event.target.value as RpmDistro)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
{Object.entries(rpmTargetLabels).map(([value, label]) => (
<option key={value} value={value}>
Expand All @@ -292,7 +296,7 @@ export default function PackagesPage() {
<select
value={aptArch}
onChange={(event) => setAptArch(event.target.value as AptArch)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
<option value="amd64">amd64</option>
<option value="arm64">arm64</option>
Expand All @@ -304,7 +308,7 @@ export default function PackagesPage() {
<select
value={rpmArch}
onChange={(event) => setRpmArch(event.target.value as RpmArch)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
<option value="x86_64">x86_64</option>
<option value="aarch64">aarch64</option>
Expand All @@ -318,7 +322,7 @@ export default function PackagesPage() {
<select
value={aptPgVersion}
onChange={(event) => setAptPgVersion(event.target.value as AptPgVersion)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
{availableAptPgVersions.map((pgVersion) => (
<option key={pgVersion} value={pgVersion}>
Expand All @@ -333,7 +337,7 @@ export default function PackagesPage() {
<select
value={rpmPgVersion}
onChange={(event) => setRpmPgVersion(event.target.value as RpmPgVersion)}
className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
className={finderSelectClass}
>
<option value="17">17</option>
<option value="18">18</option>
Expand Down Expand Up @@ -410,7 +414,7 @@ export default function PackagesPage() {
{packageFamily === "apt" ? (
<p className="mt-2 text-sm text-gray-400">
Running in a clean Ubuntu container as <code className="text-gray-300">root</code>?
Run <code className="text-gray-300">export DEBIAN_FRONTEND=noninteractive</code> in the shell first
Run <code className="text-gray-300">export DEBIAN_FRONTEND=<wbr />noninteractive</code> in the shell first
(and omit <code className="text-gray-300">sudo</code> from the command above).
Without it, <code className="text-gray-300">tzdata</code> prompts for input partway through
and the install hangs with no visible error.
Expand Down
8 changes: 4 additions & 4 deletions app/samples/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,13 @@ export default function Samples() {
/>
</div>

{/* Filters */}
{/* Filters; touch screens get 16px selects because iOS zooms into smaller form fields */}
<div className="flex flex-wrap gap-3 mb-10 justify-center">
{/* Language */}
<select
value={language}
onChange={(e) => setLanguage(e.target.value)}
className="bg-neutral-800/80 border border-neutral-700/50 text-gray-300 text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-purple-500/60 cursor-pointer"
className="bg-neutral-800/80 border border-neutral-700/50 text-gray-300 text-sm pointer-coarse:text-base rounded-lg px-3 py-2 focus:outline-none focus:border-purple-500/60 cursor-pointer"
>
<option value="">All Languages</option>
{LANGUAGES.map((l) => (
Expand All @@ -151,7 +151,7 @@ export default function Samples() {
<select
value={industry}
onChange={(e) => setIndustry(e.target.value)}
className="bg-neutral-800/80 border border-neutral-700/50 text-gray-300 text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-purple-500/60 cursor-pointer"
className="bg-neutral-800/80 border border-neutral-700/50 text-gray-300 text-sm pointer-coarse:text-base rounded-lg px-3 py-2 focus:outline-none focus:border-purple-500/60 cursor-pointer"
>
<option value="">All Industries</option>
{INDUSTRIES.map((i) => (
Expand All @@ -160,7 +160,7 @@ export default function Samples() {
</select>

{/* Difficulty */}
<div className="flex gap-2">
<div className="flex flex-wrap justify-center gap-2">
{DIFFICULTIES.map((d) => (
<button
key={d}
Expand Down
Loading
Loading