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 6fb309a3b9578528a61faa0bc3450096bd9cbdc5..bfa1dbcd6bdbd169aa11111396ce6a90161ec853 100644 (file)
--- 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;
 }