fix(web): responsive layout for landing, signin, and dashboard

Replaced fixed px-[80px] / py-[64px] padding with px-5 md:px-[80px]
so content stops colliding with the viewport edge on phones. The
hero H1 shrinks to 28px / 34px leading on mobile, the stats grid
collapses to one column, the sticky header shrinks to 64px with
tighter nav spacing and a shorter CTA, the self-host banner
centers on a narrow screen, and the footer stacks vertically.

Same pass applied to /signin and the dashboard shell so the whole
app is usable on mobile, not just the marketing page.

Author: Devansh-365

apps/web/src/app/app/layout.tsx

@@ -57,10 +57,12 @@ export default function DashboardLayout({
     return (
       <main>
         <div
-          className="mx-auto border-l border-r min-h-screen px-[80px] py-[64px]"
+          className="mx-auto border-l border-r min-h-screen px-5 md:px-[80px] py-10 md:py-[64px]"
           style={{ maxWidth: '1080px', borderColor: '#3d3838' }}
         >
-          <h1 className="text-[38px] font-bold leading-[57px] mb-4">API unreachable</h1>
+          <h1 className="text-[28px] md:text-[38px] font-bold leading-[36px] md:leading-[57px] mb-4">
+            API unreachable
+          </h1>
           <div
             className="mb-6 rounded border px-3 py-2 text-sm leading-[20px] flex items-start gap-2"
             style={{
@@ -126,22 +128,28 @@ export default function DashboardLayout({
         style={{ maxWidth: '1080px', borderColor: '#3d3838' }}
       >
         <header
-          className="sticky top-0 z-10 flex items-center justify-between min-h-[80px] px-[80px] border-b"
+          className="sticky top-0 z-10 flex items-center justify-between gap-3 min-h-[64px] md:min-h-[80px] px-4 md:px-[80px] border-b"
           style={{ backgroundColor: '#131010', borderColor: '#3d3838' }}
         >
           <Link href="/app" style={{ color: '#f2eded', fontWeight: 700 }}>
             <span style={{ color: '#22c55e' }}>[</span>sheetforge
             <span style={{ color: '#22c55e' }}>]</span>{' '}
             <span style={{ color: '#7f7a7a' }}>dashboard</span>
           </Link>
-          <nav className="flex items-center gap-8 text-sm">
-            <Link href="/app" className="transition-colors" style={{ color: '#b8b2b2' }}>
+          <nav className="flex items-center gap-3 md:gap-8 text-xs md:text-sm">
+            <Link
+              href="/app"
+              className="hidden sm:inline transition-colors"
+              style={{ color: '#b8b2b2' }}
+            >
               Projects
             </Link>
             <Link href="/" className="transition-colors" style={{ color: '#b8b2b2' }}>
               ← Home
             </Link>
-            <span style={{ color: '#7f7a7a' }}>{user.email}</span>
+            <span className="hidden md:inline truncate max-w-[160px]" style={{ color: '#7f7a7a' }}>
+              {user.email}
+            </span>
             <button
               type="button"
               onClick={async () => {
@@ -160,7 +168,7 @@ export default function DashboardLayout({
             </button>
           </nav>
         </header>
-        <div className="px-[80px] py-[48px]">{children}</div>
+        <div className="px-5 md:px-[80px] py-8 md:py-[48px]">{children}</div>
       </div>
       <ToastHost />
       <ConfirmHost />

apps/web/src/app/page.tsx

@@ -104,13 +104,13 @@ const faqItems = [
 function Header() {
   return (
     <header
-      className="sticky top-0 z-10 flex items-center justify-between min-h-[80px] px-[80px] border-b"
+      className="sticky top-0 z-10 flex items-center justify-between min-h-[64px] md:min-h-[80px] px-4 md:px-[80px] border-b"
       style={{ backgroundColor: '#131010' }}
     >
       <a href="/" aria-label="sheetforge home">
         <OpenCodeLogo />
       </a>
-      <nav className="flex items-center gap-8">
+      <nav className="flex items-center gap-3 md:gap-8 text-sm md:text-base">
         <a
           href="https://github.com/Devansh-365/sheetforge"
           className="text-[#b8b2b2] hover:text-[#f2eded] transition-colors"
@@ -119,17 +119,21 @@ function Header() {
         >
           GitHub <span className="text-[#22c55e]">[★]</span>
         </a>
-        <a href="#faq" className="text-[#b8b2b2] hover:text-[#f2eded] transition-colors">
+        <a
+          href="#faq"
+          className="hidden sm:inline text-[#b8b2b2] hover:text-[#f2eded] transition-colors"
+        >
           FAQ
         </a>
         <a
           href="https://github.com/Devansh-365/sheetforge#quickstart"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded px-4 py-2 font-medium transition-opacity hover:opacity-90 cursor-pointer"
+          className="rounded px-3 md:px-4 py-1.5 md:py-2 font-medium transition-opacity hover:opacity-90 cursor-pointer whitespace-nowrap"
           style={{ backgroundColor: '#22c55e', color: '#0c0c0e' }}
         >
-          Self-host it →
+          <span className="hidden sm:inline">Self-host it →</span>
+          <span className="sm:hidden">Self-host →</span>
         </a>
       </nav>
     </header>
@@ -139,7 +143,7 @@ function Header() {
 function SelfHostBanner() {
   return (
     <div
-      className="px-[80px] py-3 border-b flex items-center justify-center gap-2 text-sm"
+      className="px-4 md:px-[80px] py-3 border-b flex items-start md:items-center justify-center gap-2 text-[13px] md:text-sm text-center md:text-left"
       style={{
         backgroundColor: '#0f1a12',
         borderColor: '#14532d',
@@ -177,7 +181,10 @@ function HeroSection() {
   };
 
   return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <div className="flex items-center gap-3 mb-8">
         <span
           className="border px-2 py-0.5 text-sm font-medium"
@@ -199,7 +206,7 @@ function HeroSection() {
         </p>
       </div>
 
-      <h1 className="text-[38px] font-bold leading-[57px] text-[#f2eded] mb-4">
+      <h1 className="text-[28px] md:text-[38px] font-bold leading-[34px] md:leading-[57px] text-[#f2eded] mb-4">
         The Google Sheets backend that behaves like a real database
       </h1>
       <p className="text-[#b8b2b2] mb-8 leading-[24px]">
@@ -283,7 +290,10 @@ function HeroSection() {
 
 function FeaturesSection() {
   return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <h2 className="text-[16px] font-bold text-[#f2eded] mb-3">What is sheetforge?</h2>
       <p className="text-[#b8b2b2] mb-8 leading-[24px]">
         A race-condition-safe REST API layer for Google Sheets with auto-generated TypeScript and
@@ -306,14 +316,17 @@ function FeaturesSection() {
 
 function StatsSection() {
   return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <h2 className="text-[16px] font-bold text-[#f2eded] mb-3">Built on numbers that matter</h2>
       <p className="text-[#b8b2b2] leading-[32px] mb-8">
         <span style={{ color: '#22c55e' }}>[*]</span> The write queue handles 1000 concurrent POSTs
         to the same sheet and produces exactly 1000 rows, in order — zero race conditions, sub-100ms
         cached reads globally.
       </p>
-      <div className="grid grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
         <div className="border rounded p-6 flex flex-col gap-3" style={{ borderColor: '#3d3838' }}>
           <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
             <title>Parallel writes converging into an ordered stream</title>
@@ -396,7 +409,10 @@ function StatsSection() {
 
 function PrivacySection() {
   return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <h2 className="text-[16px] font-bold text-[#f2eded] mb-3">
         Your data never leaves your infrastructure
       </h2>
@@ -413,7 +429,11 @@ function FAQSection() {
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   return (
-    <section id="faq" className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      id="faq"
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <h2 className="text-[16px] font-bold text-[#f2eded] mb-8">FAQ</h2>
       <div className="space-y-0">
         {faqItems.map((item, i) => (
@@ -439,7 +459,10 @@ function FAQSection() {
 
 function ZenSection() {
   return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: '#3d3838' }}>
+    <section
+      className="px-5 md:px-[80px] py-10 md:py-[64px] border-b"
+      style={{ borderColor: '#3d3838' }}
+    >
       <h2 className="text-[16px] font-bold text-[#f2eded] mb-3">
         Self-host today. Hosted SaaS on the way.
       </h2>
@@ -470,9 +493,9 @@ function ZenSection() {
 
 function Footer() {
   return (
-    <footer className="px-[80px] py-4 flex items-center justify-between text-sm text-[#4a4545]">
+    <footer className="px-5 md:px-[80px] py-4 flex flex-col sm:flex-row gap-2 sm:gap-0 items-start sm:items-center justify-between text-sm text-[#4a4545]">
       <span>&copy;2026 sheetforge · MIT OSS · self-hosted</span>
-      <div className="flex items-center gap-6">
+      <div className="flex items-center gap-4 md:gap-6">
         <a href="#faq" className="hover:text-[#4ade80] transition-colors">
           FAQ
         </a>

apps/web/src/app/signin/page.tsx

@@ -45,7 +45,7 @@ export default function SignInPage() {
       >
         {/* Header */}
         <header
-          className="flex items-center justify-between min-h-[80px] px-[80px] border-b"
+          className="flex items-center justify-between min-h-[64px] md:min-h-[80px] px-4 md:px-[80px] border-b"
           style={{ backgroundColor: '#131010', borderColor: '#3d3838' }}
         >
           <Link href="/" aria-label="sheetforge home">
@@ -57,7 +57,7 @@ export default function SignInPage() {
         </header>
 
         {/* Card */}
-        <div className="flex-1 flex items-center justify-center px-[80px] py-[64px]">
+        <div className="flex-1 flex items-center justify-center px-5 md:px-[80px] py-10 md:py-[64px]">
           <div className="w-full max-w-md">
             <div
               className="border rounded p-8"