From ec1d25586366cbf63d38ca8f3f8c37a11ae5fb37 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 23 Jul 2020 21:40:30 -0400
Subject: [PATCH] Work around Firefox flexbox scrolling bug

row-reverse and column-reverse do not overflow correctly in Firefox.
The left side's statblock list is now row-order; the list of combatants
is reversed, and the list is automatically scrolled to the right
---
 src/components/Combat.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 8f45808..2edf95b 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="combat-layout">
     <div @wheel="horizWheelLeft" class="stat-column" id="left-stats">
-      <Statblock @selectAlly="right = combatant" @select="left = combatant" class="left-stats" :data-active="combatant === left" :data-active-ally="combatant === right" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes && !c.digested)" v-bind:key="'left-stat-' + index" :subject="combatant" />
+      <Statblock @selectAlly="right = combatant" @select="left = combatant" class="left-stats" :data-active="combatant === left" :data-active-ally="combatant === right" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes && !c.digested).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" />
     </div>
     <div @wheel="horizWheelRight" class="stat-column" id="right-stats">
       <Statblock @selectAlly="left = combatant" @select="right = combatant" class="right-stats" :data-active="combatant === right" :data-active-ally="combatant === left" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters && !c.digested)" v-bind:key="'right-stat-' + index" :subject="combatant" />
@@ -85,8 +85,12 @@ export default class Combat extends Vue {
 
   actionDescription = ''
 
-  constructor () {
-    super()
+  mounted () {
+    const left = this.$el.querySelector("#left-stats")
+
+    if (left !== null) {
+      left.scrollTo(left.getBoundingClientRect().width * 2, 0)
+    }
   }
 
   @Emit("executedLeft")
@@ -164,7 +168,7 @@ export default class Combat extends Vue {
 }
 
 #left-stats {
-  flex-direction: row-reverse;
+  flex-direction: row;
 }
 
 #right-stats {
@@ -180,6 +184,7 @@ export default class Combat extends Vue {
 }
 
 .stat-column {
+  overflow-x: scroll;
   overflow-y: auto;
 }