fix(COT-120): Fix dialog OK button clipped/inaccessible on small mobile viewports

[Copilot]

On older/smaller mobile devices (e.g. iPhone 6), dialogs extended beyond the viewport height with no clamping, leaving the OK button visually squished or completely inaccessible. The root cause was twofold: no max-height on .dialog, and .dialog-content using position: absolute with justify-content: center — a combination that causes content to be clipped symmetrically at both ends when overflowing, making the top unreachable and the bottom hidden.

CSS changes (index.css)

• .dialog — add max-height: 90vh to cap dialog height; add display: flex; flex-direction: column to enable proper flex child sizing; add padding: 0 to suppress the browser's UA padding: 1em (top/bottom gap); increase width: 300px → 340px (and 250px → 290px in the max-width: 320px media query) to absorb the 2×1em horizontal padding that was previously included in the visual width via the old absolute-positioned layout
• .dialog-content — replace absolute positioning (position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%) with flex: 1; min-height: 0 so it fills the bounded dialog and shrinks correctly; change justify-content: center → flex-start to avoid the overflow+center clipping bug; overflow: auto → overflow-y: auto; set padding: 2rem 2rem 0 (left/right padding preserved, top padding retained for close-button clearance, no bottom padding)

.dialog {
    /* ... */
    width: 340px;
    max-height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dialog > div.dialog-content {
    /* ... */
    padding: 2rem 2rem 0;
    justify-content: flex-start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

JS changes (src/index.js)

• Changelog dialog — updated renderDialog style options to restore original visual dimensions after the browser UA padding reset: width: "calc(75% + 2em)", height: "calc(75% + 2em)", maxWidth: "640px". The old absolute-positioned .dialog-content measured width: 100% against the dialog's padding box (content + 2×1em side padding), so the dialog appeared 40px wider/taller than the specified percentage. The calc values restore that visual size explicitly.

Tests (cypress/e2e/game/viewport.cy.js)

• Added viewport tests asserting the migration dialog OK button is fully visible and within the viewport at 320×480 and 375×667.

Screenshots

Migration dialog at 375×667 (iPhone 6 size):

How to Play dialog at 375×667:

Original prompt

Issue Title: Dialog OK Button Appears Squished/Cut Off on Older Mobile Devices
Issue Description:

The OK button in modal dialogs is visually clipped or squished on older mobile devices, making it difficult or impossible to interact with. This degrades the user experience for users on smaller/older hardware who need to dismiss important dialogs.

---

Environment

• App/Service: Web
• Version/Build: Unknown (wordle-clone-8k1.pages.dev)
• OS/Browser: iOS (Safari) — observed on iPhone 6
• Account/Role: Standard user
• Environment: Production

---

Steps to Reproduce

1. Open the Wordle Clone web app on an older mobile device (e.g. iPhone 6) in Safari
2. Trigger a dialog (e.g. the save data migration notice on first load)
3. Scroll or view the bottom of the dialog

---

Expected Result

The OK button should be fully visible and tappable within the dialog bounds.

---

Actual Result

The OK button is visually squished — only a sliver of it is visible at the bottom of the dialog, partially obscured by the edge of the modal or the on-screen keyboard. The button text ("OK") is not legible.

---

Frequency / Scope

• Frequency: Always
• Affected users: Users on older/smaller mobile devices (e.g. iPhone 6 and similar)
• Severity: High — users may be unable to dismiss critical dialogs

---

Screenshots / Logs

• Screenshot 1: Dialog with OK button barely visible at bottom edge (1:12 AM)
• Screenshot 2: Same dialog after slight scroll, button still clipped (1:13 AM)

---

Workarounds

Users may be able to scroll within the dialog to reveal the button, though this is not guaranteed and may not be intuitive.

---

Additional Notes

The issue appears related to the dialog not accounting for available viewport height on smaller screens, especially when the on-screen keyboard is present. The dialog content may be overflowing the container without proper scroll or height clamping. Investigate max-height, overflow, and viewport-relative sizing on the dialog and its button elements for small screen breakpoints.
Fixes https://linear.app/coteh/issue/COT-120/dialog-ok-button-appears-squishedcut-off-on-older-mobile-devices
Branch Name should include the identifier "COT-120"

Issue Comments:
Comment by User (2026-04-21T20:43:44.087Z):
This thread is for an agent session with githubcopilot.

[cloudflare-workers-and-pages]

Deploying wordle-clone with    Cloudflare Pages

Latest commit:	ca31bd4
Status:	✅  Deploy successful!
Preview URL:	https://b3144b0c.wordle-clone-8k1.pages.dev
Branch Preview URL:	https://copilot-fix-dialog-ok-button.wordle-clone-8k1.pages.dev

View logs

[github-actions]

Test Results

 16 files  ±0  101 suites  ±0   5m 17s ⏱️ +9s
297 tests +2  296 ✅ +1  0 💤 ±0  1 ❌ +1 
306 runs  +2  305 ✅ +1  0 💤 ±0  1 ❌ +1 

For more details on these failures, see this check.

Results for commit ca31bd4. ± Comparison against base commit a864999.

♻️ This comment has been updated with latest results.

[Coteh]

@copilot Can you remove the padding you added to the dialog so that the content will once again go to the edges of the dialog?

[Copilot]

@copilot Can you remove the padding you added to the dialog so that the content will once again go to the edges of the dialog?

Done in 3c8c38a — removed the padding: 2rem from .dialog > div.dialog-content so the content now goes to the edges of the dialog.

[Coteh]

@copilot That padding removal still didn't seem to remove the upper and lower padding. Can you readd the padding I asked you to remove earlier, as I like the left and right padding. I just want the upper and lower paddings gone. It's possible it might be something in the parent element doing this.

[Copilot]

@copilot That padding removal still didn't seem to remove the upper and lower padding. Can you readd the padding I asked you to remove earlier, as I like the left and right padding. I just want the up...

Done in de7c147. The top/bottom gap was coming from the browser's default padding on the <dialog> element itself — with the original position: absolute approach this was bypassed, but with flex layout the dialog content sits inside that padding. Fixed by adding padding: 0 to .dialog to reset it, and restoring padding: 0 2rem on .dialog-content so left/right padding is back with no top/bottom padding.

[Coteh]

@copilot The dialogs were given space at the top before to make room for the X (close) button. That spacing is gone now, when it should be there.

Also, the changelog dialog content now has more horizontal space to the point where you can scroll horizontally, when you shouldn't be able to do that; all the changelog content should be in view and within the padding.

[Copilot]

@copilot The dialogs were given space at the top before to make room for the X (close) button. That spacing is gone now, when it should be there.

Also, the changelog dialog content now has more hori...

Fixed in 6e808d9:

1. Top space for close button — restored padding-top: 2rem by setting padding: 2rem 2rem 0 on .dialog-content (top and left/right padding, no bottom).
2. Horizontal scrolling in changelog — added overflow-x: hidden to .dialog-content to prevent any horizontal overflow.

[Coteh]

@copilot Even though the left and right padding hasn't changed, 2rem, the dialog content seems to be slightly narrower than before.

Also, remove the horizontal scrolling lock for now. I don't want to paper over any potential issues.

[Copilot]

@copilot Even though the left and right padding hasn't changed, 2rem, the dialog content seems to be slightly narrower than before.

Also, remove the horizontal scrolling lock for now. I don't want...

Fixed in 4459331:

1. Narrower content — The root cause was that adding padding: 0 to .dialog also removed the browser's default 1em (≈20px at the inherited font-size) horizontal padding on each side. The original absolutely-positioned .dialog-content used width: 100% relative to the dialog's padding box (300px content + 40px browser padding = 340px), giving a 260px text area. With flex layout, width: 100% resolves against the content box (300px), shrinking the text area to 220px. Fixed by increasing .dialog { width } from 300px → 340px (absorbing those 40px explicitly), and the media-query width from 250px → 290px. Total visual dialog width is unchanged (342px in both cases), and the text area is restored to 260px.

2. Horizontal scroll lock — Removed overflow-x: hidden from .dialog-content.

[Coteh]

@copilot Can you take a look at the specific customizations I specified for the changelog dialog? I'm wondering why the changelog dialog looks smaller now than before...

[Copilot]

@copilot Can you take a look at the specific customizations I specified for the changelog dialog? I'm wondering why the changelog dialog looks smaller now than before...

Fixed in ca31bd4.

The root cause: the changelog dialog's JS style: { width: "75%", height: "75%", maxWidth: "600px" } applies to .dialog's content box. In the original code, .dialog-content used position: absolute; width: 100%, where 100% resolves against the containing block's padding box — so it automatically absorbed the browser's default padding: 1em on each side of <dialog> (≈20px × 2 = 40px extra width and height). With padding: 0 now zeroing that out, those 40px are simply gone.

Updated the changelog dialog's style options to add them back explicitly:

• width: "calc(75% + 2em)" (2em = 2 × dialog's inherited 20px font-size = 40px)
• height: "calc(75% + 2em)"
• maxWidth: "640px" (was 600px content + 40px browser padding = 640px visual)