Improve dropdown alignment on mobile

src/css/_modifiers.scss

@@ -39,6 +39,13 @@
     }
 }
 
+@include tablet {
+    .dropdown.is-right-tablet .dropdown-menu {
+        left: auto;
+        right: 0;
+    }
+}
+
 .button.is-translucent {
     @extend .text-shadow;
 

src/js/components/App.vue

@@ -28,7 +28,7 @@
                     </div>
                     <div class="level-right">
                         <div class="level-item" v-if="showFestivalRegionDropdown">
-                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px" class="font-splatoon2" />
+                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
                         </div>
 
 
@@ -142,7 +142,7 @@
                 &ndash;
                 <a href="https://twitter.com/Splatoon2inkbot" target="_blank">Twitter</a>
                 &ndash;
-                <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-up" />
+                <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
             </div>
         </div>
 

src/js/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dropdown is-right" :class="{ 'is-active': isOpen }">
+    <div class="dropdown" :class="{ 'is-active': isOpen }">
         <div class="dropdown-trigger">
             <button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'button'">
                 <span v-if="selectedOption">{{ selectedOption.name }}</span>