From 83ff161457d6e252726d251aebff94f8c586fbec Mon Sep 17 00:00:00 2001
From: Aryam Goyal <aryamgoyal18@gmail.com>
Date: Sun, 2 Aug 2026 11:47:26 +0530
Subject: [PATCH] fix: prevent mobile setup grid overflow

---
 apps/web/app/globals.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 4fde36d..852ee3c 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -269,12 +269,13 @@ h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.25; letter-spacing: -.
 /* Setup and docs */
 .jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
 .jump-links a { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--green-dark); text-decoration: none; font-weight: 620; }
-.setup-section { padding-block: 90px; display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; border-top: 1px solid var(--line); }
-.setup-heading { display: grid; grid-template-columns: 50px 40px 1fr; align-items: start; gap: 10px; }
+.setup-section { padding-block: 90px; display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 100px; border-top: 1px solid var(--line); }
+.setup-heading { min-width: 0; display: grid; grid-template-columns: 50px 40px minmax(0, 1fr); align-items: start; gap: 10px; }
+.setup-heading > div { min-width: 0; }
 .setup-heading > span { color: var(--line-strong); font: 500 23px var(--font-mono), monospace; }
 .setup-heading > svg { color: var(--green); }
 .setup-heading h2 { font-size: 42px; }
-.setup-content { max-width: 820px; }
+.setup-content { min-width: 0; max-width: 820px; }
 .setup-lede { color: var(--ink-soft); font-size: 19px; }
 .setup-content h3 { margin: 34px 0 12px; }
 .small-note { margin-top: 18px; color: var(--ink-faint); font-size: 13px; }
@@ -366,7 +367,7 @@ h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.25; letter-spacing: -.
   .score-grid { grid-template-columns: 1fr; }
   .score-card + .score-card { border-left: 0; border-top: 1px solid var(--line); }
   .table-section .page-shell { overflow-x: auto; }
-  .setup-section { grid-template-columns: 1fr; gap: 34px; }
+  .setup-section { grid-template-columns: minmax(0, 1fr); gap: 34px; }
   .docs-layout { grid-template-columns: 1fr; }
   .docs-sidebar { display: none; }
   .footer-main { grid-template-columns: 1fr; gap: 54px; }
@@ -410,7 +411,7 @@ h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.25; letter-spacing: -.
   .confidence { grid-column: 2; justify-self: start; }
   .method-grid { grid-template-columns: 1fr; }
   .method-grid article, .method-grid article + article, .method-grid article:nth-child(3) { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line); }
-  .setup-heading { grid-template-columns: 42px 34px 1fr; }
+  .setup-heading { grid-template-columns: 42px 34px minmax(0, 1fr); }
   .setup-heading h2 { font-size: 34px; }
   .copy-command { align-items: stretch; flex-direction: column; }
   .copy-command button { width: 100%; }