From 9c46235bba7274fb016fe97651f66a7b60196d78 Mon Sep 17 00:00:00 2001 From: Folarin Akinloye Date: Wed, 14 Oct 2026 13:12:07 +0100 Subject: [PATCH] fix(ui): resolve layout overflow and improve responsiveness across mobile and tablet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Make top header controls fluid with compact theme toggle and responsive search trigger - Add max-width 100% and internal scroll to syntax code blocks to eliminate horizontal page scroll - Enable horizontal overflow scrolling on markdown parameter tables for narrow viewports - Upgrade mobile navigation drawer to full-viewport sheet with backdrop blur and explicit close action - Constrain prose and standalone containers on 320px–375px mobile viewports with break-words --- src/app/[slug]/page.tsx | 8 +- src/app/changelog/page.tsx | 18 ++--- src/app/docs/[section]/[slug]/page.tsx | 20 ++--- src/app/docs/layout.tsx | 4 +- src/app/globals.css | 5 +- src/components/docs/sidebar.tsx | 46 ++++++++--- src/components/site-header.tsx | 30 +++---- src/components/theme-toggle.tsx | 105 ++++++++++++++++--------- 8 files changed, 145 insertions(+), 91 deletions(-) diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx index deb14fe..1743730 100644 --- a/src/app/[slug]/page.tsx +++ b/src/app/[slug]/page.tsx @@ -33,16 +33,16 @@ export default async function StandaloneSitePage({ params }: SitePageParams) { if (!page) notFound(); return ( -
-

+
+

{page.title}

{page.description && ( -

+

{page.description}

)} -
+
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx index f67940a..f91dfaf 100644 --- a/src/app/changelog/page.tsx +++ b/src/app/changelog/page.tsx @@ -17,11 +17,11 @@ export default async function ChangelogPage() { const entries = await getChangelog(); return ( -
-

+
+

Changelog

-

+

What shipped, release by release. Releases are tagged on{" "} -

+
{entries.map((entry) => (
-
+

v{entry.version}

@@ -66,13 +66,13 @@ export default async function ChangelogPage() { ))}

-
+
{entry.title && ( -

+

{entry.title}

)} -
+
diff --git a/src/app/docs/[section]/[slug]/page.tsx b/src/app/docs/[section]/[slug]/page.tsx index 7766ace..84270c4 100644 --- a/src/app/docs/[section]/[slug]/page.tsx +++ b/src/app/docs/[section]/[slug]/page.tsx @@ -70,7 +70,7 @@ export default async function DocPage({ params }: DocPageParams) { const templateBadge = TEMPLATE_BADGES[page.sectionSlug] ?? { label: "Guide", color: "bg-muted text-muted-foreground border-border" }; return ( -
+
{/* Centre Column: max-w-[720px] for prose, code breaks wider up to 860px */} -
+
{/* Breadcrumb + Diataxis badge */}
-
{/* H1 Title */} -

+

{page.title}

{/* One-sentence summary in larger, muted text */} {page.description && ( -

+

{page.description}

)} @@ -135,7 +135,7 @@ export default async function DocPage({ params }: DocPageParams) {
{/* Markdown Content */} -
+
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx index cd9a9c5..524e32c 100644 --- a/src/app/docs/layout.tsx +++ b/src/app/docs/layout.tsx @@ -9,9 +9,9 @@ export default async function DocsLayout({ const sections = await getDocSections(); return ( -
+
-
+
{children}
diff --git a/src/app/globals.css b/src/app/globals.css index 2aebb5e..03ae851 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -192,6 +192,9 @@ body { font-size: 0.875rem; margin: 1.75rem 0; border: 1px solid var(--border); + display: block; + overflow-x: auto; + max-width: 100%; } .prose :where(thead th) { @@ -272,7 +275,7 @@ body { background: var(--code-bg); border-radius: 6px; overflow: hidden; - max-width: 860px; + max-width: 100%; } [data-rehype-pretty-code-figure] pre { diff --git a/src/components/docs/sidebar.tsx b/src/components/docs/sidebar.tsx index daed31d..e19c3c8 100644 --- a/src/components/docs/sidebar.tsx +++ b/src/components/docs/sidebar.tsx @@ -1,6 +1,6 @@ "use client"; -import { ChevronDown } from "lucide-react"; +import { ChevronDown, FileText, X } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useState } from "react"; @@ -17,11 +17,11 @@ const DIATAXIS_HINTS: Record = { reference: "Reference", }; -function SectionNav({ sections }: { sections: DocSection[] }) { +function SectionNav({ sections, onNavigate }: { sections: DocSection[]; onNavigate?: () => void }) { const pathname = usePathname(); return ( -