Finally fix display of long hints

index.html

@@ -172,7 +172,9 @@
                     <p class="-bottom"></p>
                     <p class="-keyhint"></p>
                 </div>
+                <div class="player-hint-wrapper">
                     <div class="player-hint"></div>
+                </div>
                 <div class="chips">
                     <h3>Hearts</h3>
                     <output></output>

js/main.js

@@ -1365,6 +1365,7 @@ class Player extends PrimaryView {
         if (hint_tile !== this.previous_hint_tile) {
             this.previous_hint_tile = hint_tile;
             this.hint_el.textContent = '';
+            this.hint_el.parentNode.classList.toggle('--visible', !! hint_tile);
             if (hint_tile) {
                 // Parse out %X sequences and replace them with <kbd> elements
                 let hint_text = hint_tile.hint_text ?? this.level.stored_level.hint;

style.css

@@ -1101,10 +1101,13 @@ dl.score-chart .-sum {
     display: flex;
 }
 
-#player-game-area > .player-hint {
+/* This has a wrapper because scrollables don't work too well as the direct child of a grid or flex
+ * parent; they really want to expand to their natural size, and I do not want that */
+#player-game-area > .player-hint-wrapper {
     grid-area: hint;
     align-self: stretch;
 
+    display: none;
     font-size: calc(var(--tile-height) * var(--scale) / 3);
     padding: 0.25em 0.5em;
     font-family: serif;
@@ -1112,12 +1115,16 @@ dl.score-chart .-sum {
     color: hsl(45, 100%, 60%);
     background: #080808;
     border: 1px inset #202020;
-
-    /* FIXME find a way to enforce that the hint never makes the grid get bigger */
-    overflow: auto;
 }
-#player-game-area > .player-hint:empty {
-    display: none;
+#player-game-area > .player-hint-wrapper > .player-hint {
+    overflow: auto;
+    /* Set our inherent height or whatever to zero, but then force us to expand to whatever size our
+     * parent happens to be.  Magic! */
+    height: 0;
+    min-height: 100%;
+}
+#player-game-area > .player-hint-wrapper.--visible {
+    display: initial;
 }
 
 #player .inventory {
@@ -1424,7 +1431,7 @@ body.--debug #player-debug {
         /* stick me in the center right */
         place-self: center end;
     }
-    #player > .player-hint {
+    #player-game-area > .player-hint-wrapper {
         /* Overlay hints on the inventory area */
         grid-row: chips / bonus;
         grid-column: level;