From: Carl Worth <cworth@cworth.org>
Date: Sat, 7 Mar 2026 14:36:10 +0000 (-0500)
Subject: letterrip: Allow the grid to grow beyond the default page width
X-Git-Url: https://git.cworth.org/git?a=commitdiff_plain;h=01b6ef4c39c02e3ad88f3b608375de73b7d53542;p=lmno.games

letterrip: Allow the grid to grow beyond the default page width

It's silly to make the user scroll back and forth when the grid gets
wider than the default page. So set the board's container to use a
maximum width that is based on the viewport, rather than just being a
percentage of the parent. For this to work, we also have to drop the
parent-relative 100% maximum width from .board-and-rack.
---

diff --git a/letterrip/letterrip.css b/letterrip/letterrip.css
index 6fb309a..bfa1dbc 100644
--- a/letterrip/letterrip.css
+++ b/letterrip/letterrip.css
@@ -160,13 +160,15 @@
 .board-and-rack {
   display: inline-flex;
   flex-direction: column;
-  max-width: 100%;
 }
 
 .board-container {
   margin-bottom: 1em;
   overflow: auto;
-  max-width: 100%;
+  /* Size relative to the viewport so the grid can grow beyond
+     #page's max-width, using available screen space before
+     resorting to a scrollbar. */
+  max-width: calc(100vw - 2em);
   --cell-size: 48px;
 }