Add spacers to the statblock lists to even out display

src/components/Combat.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="combat-layout">
-    <div @wheel="horizWheelLeft" class="stat-column" id="left-stats">
+    <div @wheel="horizWheelLeft" class="statblock-row" id="left-stats">
       <Statblock @selectPredator="right = combatant.containedIn.owner" @selectAlly="right = combatant" @select="doSelectLeft(combatant)" class="left-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <div class="spacer"></div>
     </div>
-    <div @wheel="horizWheelRight" class="stat-column" id="right-stats">
+    <div @wheel="horizWheelRight" class="statblock-row" id="right-stats">
       <Statblock @selectPredator="left = combatant.containedIn.owner" @selectAlly="left = combatant" @select="doSelectRight(combatant)" class="right-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <div class="spacer"></div>
     </div>
     <div class="statblock-separator" id="statblock-separator-left"></div>
     <div class="statblock-separator" id="statblock-separator-center"></div>
@@ -200,6 +202,12 @@ export default class Combat extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
+.spacer {
+  flex: 1 0;
+  min-width: 2px;
+  min-height: 100%;
+}
 .combat-layout {
   position: relative;
   display: grid;
@@ -261,7 +269,7 @@ export default class Combat extends Vue {
   background: linear-gradient(90deg, transparent, #111 3px, #111  7px, transparent 10px);
 }
 
-.stat-column {
+.statblock-row {
   overflow-x: scroll;
   overflow-y: auto;
 }

src/components/Header.vue

@@ -35,6 +35,6 @@ a {
   color: #66b
 }
 #header i {
-  font-size: 7vh;
+  font-size: 5vh;
 }
 </style>

src/components/Statblock.vue

@@ -331,6 +331,11 @@ a {
   opacity: 0.50;
 }
 
+.statblock:hover[data-disabled] .statblock-shader-hover,
+.statblock:hover[data-active] .statblock-shader-hover {
+  opacity: 0;
+}
+
 .statblock:hover .statblock-shader-hover {
   background: white;
   opacity: 0.20;