Repository navigation
Fix tic-tac-toe board sizing on phones - #33
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 453694402f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -1,2 +1,2 @@ | |||
| @import url('../styles/game.css'); | |||
| .game-layout{align-items:start}.arena-wrap{display:grid;aspect-ratio:1;place-items:center;background:#14251f}.board{display:grid;width:82%;aspect-ratio:1;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));gap:8px;background:rgba(255,255,255,.28)}.cell{display:grid;min-width:0;min-height:0;padding:0;place-items:center;border:0;background:#14251f;color:var(--mark);font:700 clamp(58px,10vw,130px)/1 "DM Sans",sans-serif;cursor:pointer}.cell:hover:empty{background:#1d342c}.cell.win{background:#294c3e}.cell:disabled{cursor:default}.result-overlay{position:absolute;inset:0;display:grid;padding:20px;place-content:center;gap:12px;color:white;background:rgba(14,28,23,.8);text-align:center}.result-overlay[hidden]{display:none}.result-overlay strong{font-family:"DM Serif Display";font-size:42px;font-weight:400}.result-overlay .primary-button{width:auto}.difficulty{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase}.difficulty select{padding:12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:var(--card)}@media(max-width:850px){.arena-wrap{max-width:620px;margin:auto}.online-panel,.color-controls,.difficulty{grid-column:auto}} | |||
| .game-layout{align-items:start}.arena-wrap{display:grid;width:100%;min-width:0;aspect-ratio:1;place-items:center;background:#14251f}.board{display:grid;width:82%;aspect-ratio:1;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));gap:8px;background:rgba(255,255,255,.28)}.cell{display:grid;min-width:0;min-height:0;padding:0;place-items:center;border:0;background:#14251f;color:var(--mark);font:700 clamp(58px,10vw,130px)/1 "DM Sans",sans-serif;cursor:pointer;touch-action:manipulation}.cell:hover:empty{background:#1d342c}.cell.win{background:#294c3e}.cell:disabled{cursor:default}.result-overlay{position:absolute;inset:0;display:grid;padding:20px;place-content:center;gap:12px;color:white;background:rgba(14,28,23,.8);text-align:center}.result-overlay[hidden]{display:none}.result-overlay strong{font-family:"DM Serif Display";font-size:42px;font-weight:400}.result-overlay .primary-button{width:auto}.difficulty{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase}.difficulty select{padding:12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:var(--card)}@media(max-width:850px){.arena-wrap{max-width:620px;margin-inline:auto}.online-panel,.color-controls,.difficulty{grid-column:auto}} | |||
There was a problem hiding this comment.
On viewports wider than 850px but at most 1180px, or wider than 850px with a height at most 900px—such as a phone in landscape—this unconditional width:100% comes after the imported styles/game.css and overrides its equal-specificity .arena-wrap { width:min(100%,calc((100dvh - 204px) * 1.6)); } media rule. Because that same rule makes .app-shell viewport-height and overflow:hidden, the now-square tic-tac-toe arena can expand to the full grid track and have its lower cells clipped off-screen; retain a viewport-height bound for the square arena or limit this override to the narrow, single-column breakpoint.
Useful? React with 👍 / 👎.
Motivation
Description
tictactoe/styles.cssto make the arena fill available width by setting.arena-wrap{width:100%;min-width:0;aspect-ratio:1}and to addtouch-action: manipulationto.cellso taps behave correctly on touch devices.margin-inline:autofor proper centering on narrow screens.tests/tictactoe.test.jsto assert the new.arena-wrapsizing and keep the existing assertions that the grid template and.cellmin-width/min-heightremain fixed.Testing
npm test, and all 36 tests passed.npm run check, and the staticnode --checkvalidations completed successfully.npx playwrightto capture a mobile screenshot, but the tool install failed due to a403from the package registry so no browser-based screenshot was produced.Codex Task