thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Daily Word: keyboard fills full width + kill the last overflow/scrollbar

Browse Source 
* Keyboard was shrinking to content + centering (dead horizontal space, squished
  letters): auto side-margins on a flex item in the mobile flex-column don't
  stretch. Now full width (align-self: stretch, margin sides 0), so the 9 letter
  keys spread across the screen and the controls look proportional.
* Board tile width budget bumped (56→64) to cover page padding + the 5px gaps, so
  Long Word (6 wide) can't trigger the few-px horizontal scroll.
* Hid the play-area scrollbar (scrollbar-width: none) so no stray "divider" shows.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 08:20:50 -04:00
parent 35c5dc0c74
commit ac418591a8
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/WordGame.svelte
+10 -4
View File
@@ -265,16 +265,22 @@
@media (max-width: 720px) {
.wordgame { display: flex; flex-direction: column; height: 100%; max-width: 100%; }
.play-area { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
justify-content: flex-start; padding: 8px 0 4px; }
justify-content: flex-start; padding: 8px 0 4px; scrollbar-width: none; }
.play-area::-webkit-scrollbar { display: none; } /* no stray scrollbar "divider" */
.board {
--tile: min(64px, calc((100vw - 56px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
/* budget covers page padding + inter-tile gaps so 6 letters never overflow */
--tile: min(64px, calc((100vw - 64px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
gap: 5px; width: fit-content; margin: 0 auto 10px;
}
.row { grid-template-columns: repeat(var(--cols), var(--tile)); gap: 5px; }
.tile { width: var(--tile); height: var(--tile); aspect-ratio: auto; font-size: calc(var(--tile) * 0.46); }
.keyboard { flex-shrink: 0; gap: 6px; margin: 10px auto calc(env(safe-area-inset-bottom) + 6px); }
/* Full width so the keys aren't squished — auto side margins on a flex item
shrink it to content and leave dead horizontal space. */
.keyboard { flex-shrink: 0; width: 100%; max-width: none; align-self: stretch; gap: 6px;
margin: 10px 0 calc(env(safe-area-inset-bottom) + 6px); }
.letters { gap: 5px; }
.letters .key { height: 50px; }
.controls { width: 50px; }
.controls { width: 48px; }
}
.result { text-align: center; }
.rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }