combat

apps/web/src/app/features/combat/combat-page/combat-page.component.scss

@@ -20,7 +20,12 @@
   container-type: inline-size;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--ar-space-4);
-  min-block-size: 26rem;
+  // The sprites are sized as a share of the stage, so the stage has to carry a
+  // height of its own. With only a min-block-size the tallest cut-out -- the
+  // road bandit -- sized the battlefield row from its intrinsic height and
+  // pushed the page into a scrollbar. The subtracted 12.5rem is the shell
+  // chrome around the main column: top bar, footer and its own padding.
+  block-size: max(24rem, calc(100dvh - 12.5rem));
   padding: var(--ar-space-4);
   overflow: hidden;
   border: 1px solid var(--ar-border);
@@ -182,7 +187,11 @@
   position: relative;
   z-index: 1;
   display: grid;
+  // The single row is spelled out rather than left implicit: only then is it a
+  // definite height, and only then do the sprites' percentage heights resolve
+  // against the battlefield instead of against their own artwork.
   grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(0, 1fr);
   align-items: end;
   min-block-size: 0;
 }
@@ -602,7 +611,7 @@
   }
 
   .combat__stage {
-    min-block-size: clamp(24rem, 55vh, 34rem);
+    block-size: clamp(20rem, 55dvh, 34rem);
   }
 
   .combat__log {