Add scroll-snap for mobile view (#147)

Mobile view is a bit icky to navigate.

I'm planning to work on an app-like mobile styling. But for now this would make it already a lot less annoying to use on mobile.

src/components/GameBoard/ListAddModal.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <modal
+    class="listAddButton"
     ref="listAddModal"
     :title="title"
     @open="open"
@@ -141,6 +142,10 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
   @import "src/styles/styles.scss";
 
+  .listAddButton {
+    scroll-snap-align: center;
+  }
+
   .add-list-button {
     margin-right: $gp;
   }

src/components/Lists/List.vue

@@ -266,6 +266,10 @@ export default {
       display: grid;
     }
 
+    @media($small) {
+      scroll-snap-align: center;
+    }
+
     &.unique {
       @media($small) {
         width: calc(100vw - 80px);

src/pages/GameBoard.vue

@@ -147,6 +147,10 @@ export default {
   overflow-x: auto;
   overflow-x: overlay;
   display: flex;
+
+  @media($small) {
+    scroll-snap-type: y mandatory;
+  }
 }
 
 .list-placeholder {