Merge branch 'dev'

Author: onfe

client/src/components/MessageHistory.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <section>
+  <section :class="{ firefox: isFirefox() }">
     <div class="history">
       <div
         class="message"
@@ -32,6 +32,10 @@ export default {
   methods: {
     getID(msg) {
       return "msg-" + msg.hash;
+    },
+    isFirefox() {
+      // Browser detection of firefox
+      return typeof InstallTrigger !== "undefined";
     }
   }
 };
@@ -44,30 +48,22 @@ export default {
   overflow-x: hidden;
   display: flex;
   height: 100%;
-  flex-direction: column;
+  flex-direction: column-reverse;
 }
 
 .message {
   margin-top: $spacer;
 }
 
-/*
-Problem: FireFox just doesn't scroll on a flexbox with flex-direction:column-reverse.
-
-| Potential Solution            | Negatives                    | Positives                   |
-| ----------------------------- | ---------------------------- | --------------------------- |
-| flex-direction:column-reverse | Doesn't work on FireFox.     | Works on everything except  |
-| on .history                   |                              | FireFox perfectly.          |
-| ----------------------------- | ---------------------------- | --------------------------- |
-| transform: scaleY(-1)         | Scroll direction is reversed | https://open.spotify.com/tr |
-| on .history and .message      | (doesn't affect mobile);     | ack/5foxQ24C0x7W0B2OD46AJg? |
-|                               | it's just really dumb        | si=joaaiGIsTES52UQVX5bNoQ   |
+.firefox {
+  .history {
+    flex-direction: column !important;
+  }
 
-https://open.spotify.com/track/5foxQ24C0x7W0B2OD46AJg?si=joaaiGIsTES52UQVX5bNoQ
-*/
-.history,
-.message {
-  transform: scaleY(-1);
+  .history,
+  .message {
+    transform: scaleY(-1);
+  }
 }
 
 .text {