From 99e20f6dccd4237621b3aaa9e7c1eb706c96deec Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Wed, 6 Dec 2017 20:49:30 -0800
Subject: [PATCH] Improve dropdown alignment on mobile

---
 src/css/_modifiers.scss        | 7 +++++++
 src/js/components/App.vue      | 4 ++--
 src/js/components/Dropdown.vue | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/css/_modifiers.scss b/src/css/_modifiers.scss
index a3f13b2..641f517 100644
--- a/src/css/_modifiers.scss
+++ b/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;
 
diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index 6890af6..70d7660 100644
--- a/src/js/components/App.vue
+++ b/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>
 
diff --git a/src/js/components/Dropdown.vue b/src/js/components/Dropdown.vue
index bfe3119..9be732e 100644
--- a/src/js/components/Dropdown.vue
+++ b/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>