feat(web): responsive mobile layout with viewport-adaptive editor

hyperb1iss · claude · hyperb1iss · commit ec56db0d2f46 · 2026-02-12T10:07:41.000-08:00
Replace fixed 700px editor/preview heights with viewport-responsive
sizing (40vh mobile → 50vh tablet → 70vh desktop). Add mobile hamburger
nav with animated drawer, tighten spacing/padding across all sections,
and add iOS-specific fixes (overscroll, textarea zoom, safe areas).

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -207,3 +207,26 @@ body {
 .editor-scrollbar::-webkit-scrollbar-thumb:hover {
   background: var(--sc-fg-muted);
 }
+
+/* ═══════════════════════════════════════════════
+   Mobile Enhancements
+   ═══════════════════════════════════════════════ */
+
+/* Prevent overscroll bounce on iOS */
+html {
+  overscroll-behavior: none;
+}
+
+/* Ensure textareas don't zoom on iOS (min 16px font) */
+@media (max-width: 639px) {
+  textarea {
+    font-size: 16px;
+  }
+}
+
+/* Safe area padding for notched devices */
+@supports (padding: env(safe-area-inset-bottom)) {
+  footer {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Inter, JetBrains_Mono } from 'next/font/google';
 import './globals.css';
 
@@ -14,6 +14,13 @@ const jetbrainsMono = JetBrains_Mono({
   display: 'swap',
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  viewportFit: 'cover',
+};
+
 export const metadata: Metadata = {
   title: 'SilkPrint — Markdown to Stunning PDFs',
   description:
diff --git a/web/src/components/editor.tsx b/web/src/components/editor.tsx
@@ -177,9 +177,9 @@ export function Editor() {
   }, []);
 
   return (
-    <section id="editor" className="mx-auto max-w-[1600px] px-4 py-16 2xl:px-6">
-      <div className="mb-8 text-center">
-        <h2 className="mb-3 text-3xl font-bold tracking-tight md:text-4xl">
+    <section id="editor" className="mx-auto max-w-[1600px] px-3 py-8 sm:px-4 lg:py-16 2xl:px-6">
+      <div className="mb-6 text-center lg:mb-8">
+        <h2 className="mb-2 text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl lg:mb-3">
           <span className="gradient-text">Live Editor</span>
         </h2>
         <p className="text-sc-fg-muted">
@@ -191,12 +191,12 @@ export function Editor() {
       <ThemeSelector activeTheme={activeTheme} onSelect={setActiveTheme} />
 
       {/* Editor / Preview split */}
-      <div className="glow-border grid grid-cols-1 overflow-hidden rounded-2xl bg-sc-bg-dark lg:grid-cols-2">
+      <div className="glow-border grid grid-cols-1 overflow-hidden rounded-xl bg-sc-bg-dark sm:rounded-2xl lg:grid-cols-2">
         {/* Markdown input */}
         <div className="flex flex-col border-b border-sc-cyan/10 lg:border-b-0 lg:border-r">
-          <div className="flex items-center justify-between border-b border-sc-cyan/10 px-4 py-2.5">
+          <div className="flex items-center justify-between border-b border-sc-cyan/10 px-3 py-2 sm:px-4 sm:py-2.5">
             <div className="flex items-center gap-2">
-              <div className="flex gap-1.5">
+              <div className="hidden gap-1.5 sm:flex">
                 <span className="h-3 w-3 rounded-full bg-sc-error/60" />
                 <span className="h-3 w-3 rounded-full bg-sc-warning/60" />
                 <span className="h-3 w-3 rounded-full bg-sc-success/60" />
@@ -232,28 +232,28 @@ export function Editor() {
                 onChange={handleFileUpload}
                 className="hidden"
               />
-              <span className="font-mono text-xs text-sc-fg-dim">Markdown</span>
+              <span className="hidden font-mono text-xs text-sc-fg-dim sm:inline">Markdown</span>
             </div>
           </div>
           <textarea
             value={markdown}
             onChange={e => setMarkdown(e.target.value)}
-            className="editor-scrollbar h-[700px] w-full resize-none bg-transparent p-4 font-mono text-sm leading-relaxed text-sc-fg placeholder:text-sc-fg-dim focus:outline-none"
+            className="editor-scrollbar h-[40vh] w-full resize-none bg-transparent p-3 font-mono text-sm leading-relaxed text-sc-fg placeholder:text-sc-fg-dim focus:outline-none sm:p-4 md:h-[50vh] lg:h-[70vh]"
             placeholder="Paste your Markdown here..."
             spellCheck={false}
           />
         </div>
 
         {/* Preview panel */}
         <div className="flex flex-col">
-          <div className="flex items-center justify-between border-b border-sc-cyan/10 px-4 py-2.5">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-sc-fg-dim">Preview</span>
-              <span className="rounded bg-sc-purple/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-sc-purple">
+          <div className="flex items-center justify-between border-b border-sc-cyan/10 px-3 py-2 sm:px-4 sm:py-2.5">
+            <div className="flex min-w-0 items-center gap-1.5 sm:gap-2">
+              <span className="shrink-0 text-xs font-medium text-sc-fg-dim">Preview</span>
+              <span className="truncate rounded bg-sc-purple/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-sc-purple sm:px-2">
                 {activeTheme}
               </span>
               {engineState.status === 'rendering' && (
-                <span className="animate-pulse rounded bg-sc-cyan/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-sc-cyan">
+                <span className="hidden animate-pulse rounded bg-sc-cyan/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-sc-cyan sm:inline">
                   Rendering...
                 </span>
               )}
@@ -262,7 +262,7 @@ export function Editor() {
               type="button"
               onClick={handleDownload}
               disabled={!pdfBytes || pdfBytes.length === 0}
-              className="group flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-sc-purple to-sc-coral px-3 py-1.5 text-xs font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_15px_rgba(225,53,255,0.3)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:translate-y-0 disabled:hover:shadow-none"
+              className="group flex shrink-0 items-center gap-1 rounded-lg bg-gradient-to-r from-sc-purple to-sc-coral px-2.5 py-1.5 text-xs font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_15px_rgba(225,53,255,0.3)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:translate-y-0 disabled:hover:shadow-none sm:gap-1.5 sm:px-3"
             >
               <svg
                 aria-hidden="true"
@@ -283,7 +283,7 @@ export function Editor() {
           </div>
 
           {/* Preview content */}
-          <div className="editor-scrollbar h-[700px] overflow-y-auto">
+          <div className="editor-scrollbar h-[40vh] overflow-y-auto md:h-[50vh] lg:h-[70vh]">
             {engineState.status === 'loading' && (
               <div className="flex h-full flex-col items-center justify-center gap-4 p-8">
                 <LoadingSpinner />
@@ -313,7 +313,7 @@ export function Editor() {
                   </div>
                 )}
                 {pdfBytes && pdfBytes.length > 0 ? (
-                  <PdfPreview pdfBytes={pdfBytes} className="p-4" />
+                  <PdfPreview pdfBytes={pdfBytes} className="p-2 sm:p-4" />
                 ) : (
                   <div className="flex h-full items-center justify-center p-8">
                     <LoadingSpinner />
diff --git a/web/src/components/features.tsx b/web/src/components/features.tsx
@@ -128,21 +128,21 @@ const FEATURES = [
 
 export function Features() {
   return (
-    <section className="mx-auto max-w-7xl px-6 py-20">
-      <div className="mb-12 text-center">
-        <h2 className="mb-3 text-3xl font-bold tracking-tight md:text-4xl">
+    <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 md:py-20">
+      <div className="mb-8 text-center md:mb-12">
+        <h2 className="mb-2 text-2xl font-bold tracking-tight sm:text-3xl md:mb-3 md:text-4xl">
           Why <span className="gradient-text">SilkPrint</span>?
         </h2>
         <p className="mx-auto max-w-lg text-sc-fg-muted">
           Everything you need for beautiful document generation, nothing you don&apos;t.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
         {FEATURES.map(feature => (
           <div
             key={feature.title}
-            className="glow-border group rounded-2xl bg-sc-bg-dark p-6 transition-all hover:-translate-y-1"
+            className="glow-border group rounded-xl bg-sc-bg-dark p-4 transition-all hover:-translate-y-1 sm:rounded-2xl sm:p-6"
           >
             <div className="mb-4 inline-flex rounded-xl bg-sc-purple/10 p-3 text-sc-purple transition-colors group-hover:bg-sc-purple/20">
               {feature.icon}
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
@@ -1,14 +1,40 @@
+'use client';
+
 import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
 
 export function Header() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Close menu on resize past mobile breakpoint
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 768px)');
+    const handler = () => {
+      if (mq.matches) setMenuOpen(false);
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  // Lock body scroll when menu is open
+  useEffect(() => {
+    document.body.style.overflow = menuOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [menuOpen]);
+
+  const closeMenu = useCallback(() => setMenuOpen(false), []);
+
   return (
     <header className="glass fixed top-0 z-50 w-full">
-      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 md:px-6 md:py-4">
         <Link href="/" className="flex items-center gap-2">
           <span className="gradient-text text-xl font-bold tracking-tight">SilkPrint</span>
         </Link>
 
-        <nav className="flex items-center gap-6">
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-6 md:flex">
           <a
             href="#editor"
             className="text-sm text-sc-fg-muted transition-colors hover:text-sc-cyan"
@@ -38,7 +64,72 @@ export function Header() {
             Install CLI
           </a>
         </nav>
+
+        {/* Mobile hamburger */}
+        <button
+          type="button"
+          onClick={() => setMenuOpen(v => !v)}
+          className="flex items-center justify-center rounded-lg p-2 text-sc-fg-muted transition-colors hover:bg-sc-bg-highlight hover:text-sc-fg md:hidden"
+          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+        >
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            {menuOpen ? (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            ) : (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+            )}
+          </svg>
+        </button>
       </div>
+
+      {/* Mobile drawer */}
+      {menuOpen && (
+        <nav className="animate-drop-in border-t border-sc-cyan/10 bg-sc-bg-dark/95 backdrop-blur-xl md:hidden">
+          <div className="flex flex-col gap-1 px-4 py-4">
+            {/* biome-ignore lint/a11y/useValidAnchor: hash nav + menu close */}
+            <a
+              href="#editor"
+              onClick={closeMenu}
+              className="rounded-lg px-3 py-2.5 text-sm font-medium text-sc-fg-muted transition-colors hover:bg-sc-bg-highlight hover:text-sc-cyan"
+            >
+              Editor
+            </a>
+            {/* biome-ignore lint/a11y/useValidAnchor: hash nav + menu close */}
+            <a
+              href="#themes"
+              onClick={closeMenu}
+              className="rounded-lg px-3 py-2.5 text-sm font-medium text-sc-fg-muted transition-colors hover:bg-sc-bg-highlight hover:text-sc-cyan"
+            >
+              Themes
+            </a>
+            <a
+              href="https://github.com/hyperb1iss/silkprint"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-lg px-3 py-2.5 text-sm font-medium text-sc-fg-muted transition-colors hover:bg-sc-bg-highlight hover:text-sc-cyan"
+            >
+              GitHub
+            </a>
+            <div className="mt-2 border-t border-sc-cyan/10 pt-3">
+              <a
+                href="https://github.com/hyperb1iss/silkprint#installation"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center rounded-lg bg-sc-bg-highlight px-4 py-2.5 text-sm font-medium text-sc-cyan transition-all hover:shadow-[0_0_20px_rgba(128,255,234,0.15)]"
+              >
+                Install CLI
+              </a>
+            </div>
+          </div>
+        </nav>
+      )}
     </header>
   );
 }
diff --git a/web/src/components/hero.tsx b/web/src/components/hero.tsx
@@ -1,6 +1,6 @@
 export function Hero() {
   return (
-    <section className="relative flex min-h-[85vh] flex-col items-center justify-center overflow-hidden px-6 pt-20 text-center">
+    <section className="relative flex min-h-[70vh] flex-col items-center justify-center overflow-hidden px-4 pt-16 text-center md:min-h-[85vh] md:px-6 md:pt-20">
       {/* Background gradient orbs */}
       <div className="pointer-events-none absolute inset-0">
         <div className="absolute left-1/4 top-1/4 h-96 w-96 rounded-full bg-sc-purple/10 blur-[120px]" />
@@ -15,11 +15,11 @@ export function Hero() {
           40+ themes &middot; Powered by Typst
         </div>
 
-        <h1 className="mb-6 text-5xl font-extrabold leading-[1.1] tracking-tight md:text-7xl">
+        <h1 className="mb-6 text-4xl font-extrabold leading-[1.1] tracking-tight sm:text-5xl md:text-7xl">
           Markdown to PDF, <span className="gradient-text-shimmer block">made stunning.</span>
         </h1>
 
-        <p className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-sc-fg-muted md:text-xl">
+        <p className="mx-auto mb-8 max-w-2xl text-base leading-relaxed text-sc-fg-muted sm:mb-10 md:text-xl">
           Paste your Markdown. Pick a gorgeous theme. Get a print-ready PDF in seconds. No LaTeX, no
           setup, no suffering.
         </p>
diff --git a/web/src/components/pdf-preview.tsx b/web/src/components/pdf-preview.tsx
@@ -34,8 +34,9 @@ export function PdfPreview({ pdfBytes, className = '' }: PdfPreviewProps) {
       const canvases: HTMLCanvasElement[] = [];
 
       const containerWidth = containerRef.current?.clientWidth ?? 600;
-      // Leave some padding
-      const targetWidth = containerWidth - 32;
+      // Tighter padding on small containers (mobile)
+      const padding = containerWidth < 480 ? 16 : 32;
+      const targetWidth = containerWidth - padding;
 
       for (let i = 1; i <= doc.numPages; i++) {
         const page = await doc.getPage(i);
diff --git a/web/src/components/theme-gallery.tsx b/web/src/components/theme-gallery.tsx
@@ -62,9 +62,9 @@ const THEME_FAMILIES = [
 
 export function ThemeGallery() {
   return (
-    <section id="themes" className="mx-auto max-w-7xl px-6 py-20">
-      <div className="mb-12 text-center">
-        <h2 className="mb-3 text-3xl font-bold tracking-tight md:text-4xl">
+    <section id="themes" className="mx-auto max-w-7xl px-4 py-12 sm:px-6 md:py-20">
+      <div className="mb-8 text-center md:mb-12">
+        <h2 className="mb-2 text-2xl font-bold tracking-tight sm:text-3xl md:mb-3 md:text-4xl">
           <span className="gradient-text">40+ Themes</span>
         </h2>
         <p className="mx-auto max-w-lg text-sc-fg-muted">
diff --git a/web/src/components/theme-selector.tsx b/web/src/components/theme-selector.tsx
