Make the rack sticky

If the user needs to start panning the grid around, we want their rack
to always stay visible.

diff --git a/letterrip/letterrip.css b/letterrip/letterrip.css
index 09243eabfc9b18bc099915a04b905f8d2f7f0936..32458c1e2302b1023fbcd7c8e358bdb2225de2c6 100644 (file)
--- a/letterrip/letterrip.css
+++ b/letterrip/letterrip.css
@@ -134,7 +134,8 @@
   border-color: #e67e22;
 }
 
-/* Tile rack */
+/* Tile rack — sticks to the bottom of the viewport so it's always
+   visible while scrolling the board. */
 .tile-rack {
   display: flex;
   flex-wrap: wrap;
@@ -144,7 +145,9 @@
   background: #ecf0f1;
   border: 2px dashed #bdc3c7;
   border-radius: 6px;
-  margin-bottom: 1em;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
 }
 
 .tile-rack.drag-over {