From de479bb858c139ceed7c6436271ed1ced91859eb Mon Sep 17 00:00:00 2001
From: abrichr <richard.abrich@mldsai.com>
Date: Thu, 30 Jul 2026 21:21:38 -0400
Subject: [PATCH 1/2] fix: prevent start page mobile overflow

---
 cypress/e2e/start-mobile-overflow.cy.js | 55 +++++++++++++++++++++++++
 pages/start.js                          |  8 ++--
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 cypress/e2e/start-mobile-overflow.cy.js

diff --git a/cypress/e2e/start-mobile-overflow.cy.js b/cypress/e2e/start-mobile-overflow.cy.js
new file mode 100644
index 0000000..650431b
--- /dev/null
+++ b/cypress/e2e/start-mobile-overflow.cy.js
@@ -0,0 +1,55 @@
+describe('start page fits narrow mobile viewports', () => {
+    for (const width of [320, 375, 390]) {
+        it(`keeps all page content reachable at ${width}px`, () => {
+            cy.viewport(width, 812)
+            cy.visit('/start')
+
+            cy.document().then((doc) => {
+                const style = doc.createElement('style')
+                style.setAttribute('data-test-unmask', 'overflow')
+                style.innerHTML =
+                    'html, body { overflow-x: visible !important; width: auto !important; }'
+                doc.head.appendChild(style)
+            })
+
+            cy.window().then((win) => {
+                const doc = win.document
+                const viewportWidth = doc.documentElement.clientWidth
+                const clipped = []
+
+                const hasHorizontalScroller = (element) => {
+                    let node = element.parentElement
+                    while (node) {
+                        const overflowX = win.getComputedStyle(node).overflowX
+                        if (overflowX === 'auto' || overflowX === 'scroll') {
+                            return true
+                        }
+                        node = node.parentElement
+                    }
+                    return false
+                }
+
+                doc.querySelectorAll('body *').forEach((element) => {
+                    const bounds = element.getBoundingClientRect()
+                    if (
+                        bounds.width > 0 &&
+                        bounds.right > viewportWidth + 1 &&
+                        !hasHorizontalScroller(element)
+                    ) {
+                        clipped.push(
+                            `${element.tagName.toLowerCase()}.${element.className}`
+                        )
+                    }
+                })
+
+                expect(clipped, 'elements clipped past viewport').to.deep.equal(
+                    []
+                )
+                expect(doc.documentElement.scrollWidth).to.be.at.most(
+                    viewportWidth
+                )
+                expect(doc.body.scrollWidth).to.be.at.most(viewportWidth)
+            })
+        })
+    }
+})
diff --git a/pages/start.js b/pages/start.js
index 0261dce..4ba78c1 100644
--- a/pages/start.js
+++ b/pages/start.js
@@ -23,7 +23,7 @@ function Command({ command, event }) {
     }
 
     return (
-        <div className="mt-3 flex items-center gap-3 rounded-xl border border-hairline bg-panel p-3 sm:p-4">
+        <div className="mt-3 flex min-w-0 items-center gap-3 rounded-xl border border-hairline bg-panel p-3 sm:p-4">
             <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-sm text-ink">
                 {command}
             </code>
@@ -79,12 +79,12 @@ export default function StartPage() {
                     </p>
 
                     <div
-                        className="mt-10 grid gap-5 md:grid-cols-2"
+                        className="mt-10 grid grid-cols-1 gap-5 md:grid-cols-2"
                         role="list"
                         aria-label="Local ways to run OpenAdapt"
                     >
                         <article
-                            className="flex h-full flex-col rounded-2xl border border-hairline bg-panel p-5 md:p-6"
+                            className="flex h-full min-w-0 flex-col rounded-2xl border border-hairline bg-panel p-5 md:p-6"
                             role="listitem"
                         >
                             <p className="eyebrow">Command line</p>
@@ -136,7 +136,7 @@ export default function StartPage() {
                         </article>
 
                         <article
-                            className="flex h-full flex-col rounded-2xl border border-hairline bg-panel p-5 md:p-6"
+                            className="flex h-full min-w-0 flex-col rounded-2xl border border-hairline bg-panel p-5 md:p-6"
                             role="listitem"
                         >
                             <p className="eyebrow">Native app · Beta</p>

From 1d973f743cb2a06fa2ee875f4f91f09da8847d6a Mon Sep 17 00:00:00 2001
From: abrichr <richard.abrich@mldsai.com>
Date: Thu, 30 Jul 2026 21:26:43 -0400
Subject: [PATCH 2/2] test: simplify start page overflow check

---
 cypress/e2e/start-mobile-overflow.cy.js | 32 -------------------------
 1 file changed, 32 deletions(-)

diff --git a/cypress/e2e/start-mobile-overflow.cy.js b/cypress/e2e/start-mobile-overflow.cy.js
index 650431b..5cc51f6 100644
--- a/cypress/e2e/start-mobile-overflow.cy.js
+++ b/cypress/e2e/start-mobile-overflow.cy.js
@@ -10,41 +10,9 @@ describe('start page fits narrow mobile viewports', () => {
                 style.innerHTML =
                     'html, body { overflow-x: visible !important; width: auto !important; }'
                 doc.head.appendChild(style)
-            })
 
-            cy.window().then((win) => {
-                const doc = win.document
                 const viewportWidth = doc.documentElement.clientWidth
-                const clipped = []
-
-                const hasHorizontalScroller = (element) => {
-                    let node = element.parentElement
-                    while (node) {
-                        const overflowX = win.getComputedStyle(node).overflowX
-                        if (overflowX === 'auto' || overflowX === 'scroll') {
-                            return true
-                        }
-                        node = node.parentElement
-                    }
-                    return false
-                }
 
-                doc.querySelectorAll('body *').forEach((element) => {
-                    const bounds = element.getBoundingClientRect()
-                    if (
-                        bounds.width > 0 &&
-                        bounds.right > viewportWidth + 1 &&
-                        !hasHorizontalScroller(element)
-                    ) {
-                        clipped.push(
-                            `${element.tagName.toLowerCase()}.${element.className}`
-                        )
-                    }
-                })
-
-                expect(clipped, 'elements clipped past viewport').to.deep.equal(
-                    []
-                )
                 expect(doc.documentElement.scrollWidth).to.be.at.most(
                     viewportWidth
                 )