From 67ce13ef9fd1120c26e4b6a186eab55f993e79e4 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sat, 5 Sep 2026 10:20:29 -0700
Subject: [PATCH] Apply ESLint fixes to the web code

Formatting only (template indentation, attribute order, self-closing
tags, semicolons, trailing commas), from `eslint --fix src/web`. These
rules come from vue2-recommended, which the previous config also extended;
vue-cli-service lint used to apply them silently on save.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/web/components/404.vue                    |  50 +--
 src/web/components/AboutDialog.vue            | 104 +++---
 src/web/components/App.vue                    |   6 +-
 src/web/components/CalendarDialog.vue         | 116 +++---
 src/web/components/CalendarLink.vue           |  72 ++--
 src/web/components/Dropdown.vue               |  55 +--
 src/web/components/DropdownBase.vue           |  34 +-
 src/web/components/Main.vue                   | 353 +++++++++---------
 src/web/components/Modal.vue                  |  60 +--
 src/web/components/Screenshots.vue            |   6 +-
 src/web/components/VoteBanner.vue             |  40 +-
 .../screenshots/ScreenshotHelper.vue          | 111 +++---
 src/web/components/screenshots/Wrapper.vue    | 116 +++---
 .../screenshots/newweapon/NewWeapon.vue       |  10 +-
 .../screenshots/salmonrun/SalmonRun.vue       |  26 +-
 .../screenshots/salmonrun/SalmonRunGear.vue   |  10 +-
 .../screenshots/schedules/ScheduleBox.vue     |  68 ++--
 .../screenshots/schedules/Schedules.vue       |  86 ++---
 .../screenshots/splatfest/Splatfest.vue       |  30 +-
 .../screenshots/splatnetgear/SplatNetGear.vue |  38 +-
 .../components/splatoon/FinalFestDialog.vue   | 122 +++---
 .../components/splatoon/GameModeHeader.vue    |  30 +-
 .../components/splatoon/IdolResultsBox.vue    |  62 +--
 .../components/splatoon/IdolResultsRow.vue    |  50 +--
 .../components/splatoon/MerchandiseBox.vue    | 148 ++++----
 src/web/components/splatoon/NewWeaponBox.vue  |  62 ++-
 .../splatoon/NewWeaponsContainer.vue          |  16 +-
 src/web/components/splatoon/SalmonRunBox.vue  | 224 +++++------
 .../splatoon/SalmonRunDetailsBar.vue          |  80 ++--
 .../splatoon/SalmonRunGearDialog.vue          |  16 +-
 src/web/components/splatoon/ScheduleBox.vue   |  86 +++--
 .../components/splatoon/ScheduleDialog.vue    |  20 +-
 src/web/components/splatoon/ScheduleList.vue  |  60 +--
 src/web/components/splatoon/ScheduleRow.vue   | 126 ++++---
 .../splatoon/SplatNetGearDialog.vue           |  30 +-
 src/web/components/splatoon/SplatfestBox.vue  | 192 +++++-----
 .../splatoon/SplatfestHistoryDialog.vue       | 148 ++++----
 .../splatoon/SplatfestResultsBox.vue          |  66 ++--
 .../splatoon/SplatfestResultsRow.vue          |  78 ++--
 .../splatoon/SplatfestWinnerBar.vue           |   4 +-
 src/web/components/splatoon/Stage.vue         |  40 +-
 src/web/store/splatoon/finalFest.js           |   6 +-
 src/web/store/splatoon/schedules.js           |   2 +-
 src/web/store/splatoon/splatfests.js          |   6 +-
 src/web/support/directives.js                 |   2 +-
 src/web/support/stages.js                     |   2 +-
 46 files changed, 1582 insertions(+), 1487 deletions(-)

diff --git a/src/web/components/404.vue b/src/web/components/404.vue
index d321d39..96b2d31 100644
--- a/src/web/components/404.vue
+++ b/src/web/components/404.vue
@@ -1,31 +1,31 @@
 <template>
-    <div class="hero is-fullheight">
-        <div class="hero-body">
-            <!-- 404! -->
-            <div class="error404 tilt-left">
-                <div class="hook-box">
-                    <div class="box-header">
-                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-                            404 Not Found
-                        </h2>
-                    </div>
+  <div class="hero is-fullheight">
+    <div class="hero-body">
+      <!-- 404! -->
+      <div class="error404 tilt-left">
+        <div class="hook-box">
+          <div class="box-header">
+            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+              404 Not Found
+            </h2>
+          </div>
 
-                    <img src="~@/web/assets/img/404.jpg" />
+          <img src="~@/web/assets/img/404.jpg" />
 
-                    <div class="box-footer">
-                        <p class="has-text-centered">
-                            <router-link to="/" class="button is-translucent is-rounded">
-                                <span class="icon squid-icon-tilt">
-                                    <span class="fa squid-squid"></span>
-                                </span>
-                                <span class="font-splatoon2">
-                                    Return to Splatoon2.ink
-                                </span>
-                            </router-link>
-                        </p>
-                    </div>
-                </div>
-            </div>
+          <div class="box-footer">
+            <p class="has-text-centered">
+              <router-link to="/" class="button is-translucent is-rounded">
+                <span class="icon squid-icon-tilt">
+                  <span class="fa squid-squid" />
+                </span>
+                <span class="font-splatoon2">
+                  Return to Splatoon2.ink
+                </span>
+              </router-link>
+            </p>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/src/web/components/AboutDialog.vue b/src/web/components/AboutDialog.vue
index 63dd7a3..dd5382c 100644
--- a/src/web/components/AboutDialog.vue
+++ b/src/web/components/AboutDialog.vue
@@ -1,52 +1,60 @@
 <template>
-    <Modal @close="$emit('close')">
-        <div class="modal-content tilt-left-slight">
-            <div class="about-box">
-                <div class="hook-box">
-                    <div class="content">
-                        <h3 class="font-splatoon2 title is-3">
-                            <div class="image is-pulled-right hero-image is-hidden-touch">
-                                <img src="~@/web/assets/img/hero-char.png" />
-                            </div>
-                            Hello!
-                        </h3>
-                        <div class="inner-content">
-                            <p>
-                                Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
-                            </p>
-                            <p>
-                                This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
-                                and <a href="http://bulma.io/" target="_blank">Bulma</a>.
-                                Data comes from the SplatNet 2 API and other manually-maintained sources.
-                            </p>
-                            <p>
-                                Original SplatNet gear ability/price data comes from
-                                <a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
-                            </p>
-                            <p>
-                                Regional flag icons are from
-                                <a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
-                            </p>
-                            <p>
-                                Source code for this site is available on
-                                <a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
-                            </p>
-                            <p>
-                                If you'd like to use this site's data in your own site/bot/app, please review the data access policy
-                                <a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
-                            </p>
-                            <p>
-                                <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
-                                or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
-                            </p>
-                        </div>
-                    </div>
-                </div>
+  <Modal @close="$emit('close')">
+    <div class="modal-content tilt-left-slight">
+      <div class="about-box">
+        <div class="hook-box">
+          <div class="content">
+            <h3 class="font-splatoon2 title is-3">
+              <div class="image is-pulled-right hero-image is-hidden-touch">
+                <img src="~@/web/assets/img/hero-char.png" />
+              </div>
+              Hello!
+            </h3>
+            <div class="inner-content">
+              <p>
+                Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
+              </p>
+              <p>
+                This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
+                and <a href="http://bulma.io/" target="_blank">Bulma</a>.
+                Data comes from the SplatNet 2 API and other manually-maintained sources.
+              </p>
+              <p>
+                Original SplatNet gear ability/price data comes from
+                <a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
+              </p>
+              <p>
+                Regional flag icons are from
+                <a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
+              </p>
+              <p>
+                Source code for this site is available on
+                <a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
+              </p>
+              <p>
+                If you'd like to use this site's data in your own site/bot/app, please review the data access policy
+                <a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
+              </p>
+              <p>
+                <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
+                or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
+              </p>
             </div>
+          </div>
         </div>
-    </Modal>
+      </div>
+    </div>
+  </Modal>
 </template>
 
+<script>
+import Modal from './Modal.vue';
+
+export default {
+    components: { Modal },
+};
+</script>
+
 <style scoped>
 .modal-content {
     max-height: 100vh;
@@ -61,11 +69,3 @@
     z-index: 2;
 }
 </style>
-
-<script>
-import Modal from './Modal.vue';
-
-export default {
-    components: { Modal },
-};
-</script>
diff --git a/src/web/components/App.vue b/src/web/components/App.vue
index fbc544a..d3e2cd8 100644
--- a/src/web/components/App.vue
+++ b/src/web/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app">
-        <router-view />
-    </div>
+  <div id="app">
+    <router-view />
+  </div>
 </template>
diff --git a/src/web/components/CalendarDialog.vue b/src/web/components/CalendarDialog.vue
index db6d155..fe7ca6b 100644
--- a/src/web/components/CalendarDialog.vue
+++ b/src/web/components/CalendarDialog.vue
@@ -1,59 +1,68 @@
 <template>
-    <Modal @close="$emit('close')">
-        <div class="modal-content tilt-left-slight">
-            <div class="calendar-box">
-                <div class="hook-box">
-                    <div class="content">
-                        <h3 class="font-splatoon2 title is-3">
-                            <div class="image is-pulled-right hero-image is-hidden-touch">
-                                <img src="~@/web/assets/img/hero-char-2.png" />
-                            </div>
-                            Calendar Feeds
-                        </h3>
-                        <div class="inner-content">
-                            <p>
-                                Add data from Splatoon2.ink to your calendar!
-                            </p>
+  <Modal @close="$emit('close')">
+    <div class="modal-content tilt-left-slight">
+      <div class="calendar-box">
+        <div class="hook-box">
+          <div class="content">
+            <h3 class="font-splatoon2 title is-3">
+              <div class="image is-pulled-right hero-image is-hidden-touch">
+                <img src="~@/web/assets/img/hero-char-2.png" />
+              </div>
+              Calendar Feeds
+            </h3>
+            <div class="inner-content">
+              <p>
+                Add data from Splatoon2.ink to your calendar!
+              </p>
 
-                            <h4 class="font-splatoon2 title is-4">
-                                Salmon Run
-                            </h4>
-                            <p>
-                                <CalendarLink
-                                    title="Salmon Run Schedules"
-                                    link="data/coop-schedules.ics"
-                                    google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
-                                    />
-                            </p>
+              <h4 class="font-splatoon2 title is-4">
+                Salmon Run
+              </h4>
+              <p>
+                <CalendarLink
+                  title="Salmon Run Schedules"
+                  link="data/coop-schedules.ics"
+                  google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
+                />
+              </p>
 
-                            <h4 class="font-splatoon2 title is-4">
-                                Splatfests
-                            </h4>
-                            <p>
-                                <CalendarLink
-                                    :title="$t('regions.na.name')"
-                                    link="data/festivals-na.ics"
-                                    google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
-                                    />
-                                <CalendarLink
-                                    :title="$t('regions.eu.name')"
-                                    link="data/festivals-eu.ics"
-                                    google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
-                                    />
-                                <CalendarLink
-                                    :title="$t('regions.jp.name')"
-                                    link="data/festivals-jp.ics"
-                                    google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
-                                    />
-                            </p>
-                        </div>
-                    </div>
-                </div>
+              <h4 class="font-splatoon2 title is-4">
+                Splatfests
+              </h4>
+              <p>
+                <CalendarLink
+                  :title="$t('regions.na.name')"
+                  link="data/festivals-na.ics"
+                  google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
+                />
+                <CalendarLink
+                  :title="$t('regions.eu.name')"
+                  link="data/festivals-eu.ics"
+                  google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
+                />
+                <CalendarLink
+                  :title="$t('regions.jp.name')"
+                  link="data/festivals-jp.ics"
+                  google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
+                />
+              </p>
             </div>
+          </div>
         </div>
-    </Modal>
+      </div>
+    </div>
+  </Modal>
 </template>
 
+<script>
+import Modal from './Modal.vue';
+import CalendarLink from './CalendarLink.vue';
+
+export default {
+    components: { Modal, CalendarLink },
+};
+</script>
+
 <style scoped>
 .modal-content {
     max-height: 100vh;
@@ -68,12 +77,3 @@
     z-index: 2;
 }
 </style>
-
-<script>
-import Modal from './Modal.vue';
-import CalendarLink from './CalendarLink.vue';
-
-export default {
-    components: { Modal, CalendarLink },
-};
-</script>
diff --git a/src/web/components/CalendarLink.vue b/src/web/components/CalendarLink.vue
index 962283e..3db1a9f 100644
--- a/src/web/components/CalendarLink.vue
+++ b/src/web/components/CalendarLink.vue
@@ -1,27 +1,55 @@
 <template>
-    <div class="dropdown" :class="{ 'is-active': isOpen }">
-        <div class="dropdown-trigger">
-            <a :href="directLink" class="button is-link is-rounded" :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }" data-tooltip="Copied!" @click.prevent="isOpen = !isOpen" v-click-outside="hide">
-                <span class="font-splatoon2">{{ title }}</span>
-                <span class="icon is-small">
-                    <span class="chevron bottom"></span>
-                </span>
-            </a>
-        </div>
-        <div class="dropdown-menu" role="menu">
-            <div class="dropdown-content font-splatoon2 has-text-left">
-                <a :href="googleLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
-                    Google Calendar
-                </a>
-                <a :href="webcalLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
-                    Apple/Android/Outlook Calendar
-                </a>
-                <a :href="directLink" target="_blank" class="dropdown-item" @click.prevent.stop="hide" v-clipboard:copy="directLink" v-clipboard:success="onCopy" @touchstart.stop @touchend.stop>
-                    Copy ICS Link
-                </a>
-            </div>
-        </div>
+  <div class="dropdown" :class="{ 'is-active': isOpen }">
+    <div class="dropdown-trigger">
+      <a
+        v-click-outside="hide"
+        :href="directLink"
+        class="button is-link is-rounded"
+        :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }"
+        data-tooltip="Copied!"
+        @click.prevent="isOpen = !isOpen"
+      >
+        <span class="font-splatoon2">{{ title }}</span>
+        <span class="icon is-small">
+          <span class="chevron bottom" />
+        </span>
+      </a>
     </div>
+    <div class="dropdown-menu" role="menu">
+      <div class="dropdown-content font-splatoon2 has-text-left">
+        <a
+          :href="googleLink"
+          target="_blank"
+          class="dropdown-item"
+          @touchstart.stop
+          @touchend.stop
+        >
+          Google Calendar
+        </a>
+        <a
+          :href="webcalLink"
+          target="_blank"
+          class="dropdown-item"
+          @touchstart.stop
+          @touchend.stop
+        >
+          Apple/Android/Outlook Calendar
+        </a>
+        <a
+          v-clipboard:copy="directLink"
+          v-clipboard:success="onCopy"
+          :href="directLink"
+          target="_blank"
+          class="dropdown-item"
+          @click.prevent.stop="hide"
+          @touchstart.stop
+          @touchend.stop
+        >
+          Copy ICS Link
+        </a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/Dropdown.vue b/src/web/components/Dropdown.vue
index 6b3c6fb..0d5c12c 100644
--- a/src/web/components/Dropdown.vue
+++ b/src/web/components/Dropdown.vue
@@ -1,27 +1,36 @@
 <template>
-    <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>
-                <span class="icon is-small">
-                    <span class="chevron bottom"></span>
-                </span>
-            </button>
-            <a @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'a'">
-                <span v-if="selectedOption">{{ selectedOption.name }}</span>
-                <span class="icon is-small">
-                    <span class="chevron top"></span>
-                </span>
-            </a>
-        </div>
-        <div class="dropdown-menu" role="menu">
-            <div class="dropdown-content font-splatoon2 has-text-left">
-                <a href="#" class="dropdown-item" v-for="option in options" :key="option.key" :class="{ 'is-active': option.key == value }" @click.prevent="select(option)" @touchstart.stop @touchend.prevent="select(option)">
-                    {{ option.name }}
-                </a>
-            </div>
-        </div>
+  <div class="dropdown" :class="{ 'is-active': isOpen }">
+    <div class="dropdown-trigger">
+      <button v-if="tag == 'button'" v-click-outside="hide" class="button is-clear font-splatoon2" @click="isOpen = !isOpen">
+        <span v-if="selectedOption">{{ selectedOption.name }}</span>
+        <span class="icon is-small">
+          <span class="chevron bottom" />
+        </span>
+      </button>
+      <a v-if="tag == 'a'" v-click-outside="hide" @click="isOpen = !isOpen">
+        <span v-if="selectedOption">{{ selectedOption.name }}</span>
+        <span class="icon is-small">
+          <span class="chevron top" />
+        </span>
+      </a>
     </div>
+    <div class="dropdown-menu" role="menu">
+      <div class="dropdown-content font-splatoon2 has-text-left">
+        <a
+          v-for="option in options"
+          :key="option.key"
+          href="#"
+          class="dropdown-item"
+          :class="{ 'is-active': option.key == value }"
+          @click.prevent="select(option)"
+          @touchstart.stop
+          @touchend.prevent="select(option)"
+        >
+          {{ option.name }}
+        </a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -52,5 +61,5 @@ export default {
             this.hide();
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/DropdownBase.vue b/src/web/components/DropdownBase.vue
index 9272697..4b093f5 100644
--- a/src/web/components/DropdownBase.vue
+++ b/src/web/components/DropdownBase.vue
@@ -1,21 +1,21 @@
 <template>
-    <div class="dropdown" :class="{ 'is-active': isActive }">
-        <div class="dropdown-trigger">
-            <a :class="triggerClass" @click="isActive = !isActive" v-click-outside="hide">
-                <slot name="trigger">
-                    <span>{{ label }}</span>
-                    <span class="icon is-small">
-                        <span class="chevron bottom"></span>
-                    </span>
-                </slot>
-            </a>
-        </div>
-        <div class="dropdown-menu" role="menu">
-            <div class="dropdown-content">
-                <slot />
-            </div>
-        </div>
+  <div class="dropdown" :class="{ 'is-active': isActive }">
+    <div class="dropdown-trigger">
+      <a v-click-outside="hide" :class="triggerClass" @click="isActive = !isActive">
+        <slot name="trigger">
+          <span>{{ label }}</span>
+          <span class="icon is-small">
+            <span class="chevron bottom" />
+          </span>
+        </slot>
+      </a>
     </div>
+    <div class="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <slot />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -35,5 +35,5 @@ export default {
             this.isActive = false;
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/Main.vue b/src/web/components/Main.vue
index 9112029..7a5b829 100644
--- a/src/web/components/Main.vue
+++ b/src/web/components/Main.vue
@@ -1,181 +1,182 @@
 <template>
-    <div class="hero is-fullheight" id="main">
+  <div id="main" class="hero is-fullheight">
+    <!-- Site header -->
+    <div class="hero-head">
+      <!-- <VoteBanner /> -->
 
-        <!-- Site header -->
-        <div class="hero-head">
-            <!-- <VoteBanner /> -->
-
-            <div class="container is-fluid">
-                <div class="level is-marginless">
-                    <div class="level-left">
-                        <div class="level-item">
-                            <h1 class="title is-1 font-splatoon1 is-inline">Splatoon 2</h1>
-                        </div>
-                    </div>
-
-                    <div class="level-right">
-                        <div class="level-item">
-                            <h3 class="subtitle is-3 font-splatoon2 is-inline">{{ $t('ui.map_schedules') }}</h3>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="level">
-                    <div class="level-left">
-                        <div class="level-item">
-                            <a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
-                                <span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
-                            </a>
-                        </div>
-                        <div class="level-item">
-                            <a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
-                                <span class="font-splatoon2">Splatoon 3</span>
-                            </a>
-                        </div>
-                    </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 is-right-tablet" />
-                        </div>
-
-
-                        <div class="level-item" v-if="showFestivalRegionDropdown">
-                            <!-- Empty spacer to add some room when festivals are active -->
-                        </div>
-
-                        <div class="level-item" v-if="hasMerchandises">
-                            <router-link to="/splatnet" class="button is-translucent-dark is-rounded">
-                                <span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
-                            </router-link>
-                        </div>
-                    </div>
-                </div>
+      <div class="container is-fluid">
+        <div class="level is-marginless">
+          <div class="level-left">
+            <div class="level-item">
+              <h1 class="title is-1 font-splatoon1 is-inline">
+                Splatoon 2
+              </h1>
             </div>
+          </div>
+
+          <div class="level-right">
+            <div class="level-item">
+              <h3 class="subtitle is-3 font-splatoon2 is-inline">
+                {{ $t('ui.map_schedules') }}
+              </h3>
+            </div>
+          </div>
         </div>
 
-        <!-- Main body area -->
-        <div class="hero-body">
-            <div class="container is-fluid">
-                <!-- Loading spinner -->
-                <div v-if="loading" class="has-text-centered">
-                    <span class="icon is-large">
-                        <span class="fa fa-3x fa-spin squid-refresh"></span>
-                    </span>
-                </div>
-
-                <div v-else>
-                    <!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
-                    <div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
-                        <div class="column">
-                            <div class="splatfest tilt-left">
-                                <div class="hook-box">
-                                    <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="column">
-                            <ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
-                        </div>
-                    </div>
-
-                    <!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
-                    <div v-else class="columns is-desktop">
-                        <div class="column">
-                            <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
-                        </div>
-                        <div class="column">
-                            <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
-                        </div>
-                        <div class="column">
-                            <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
-                        </div>
-                    </div>
-
-                    <!-- Upcoming Splatfest and Salmon Run boxes -->
-                    <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
-                        <div class="column" v-if="showSplatfestOnBottomRow">
-                            <div class="splatfest tilt-right" style="margin-top: 40px">
-                                <div class="hook-box">
-                                    <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="column" v-if="shiftySchedule">
-                            <div class="shifty-box font-splatoon2 tilt-right">
-                                <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
-                                    <template v-if="shiftySchedule.stages.length === 1">
-                                        Current Shifty Station
-                                    </template>
-                                    <template v-else>
-                                        Current Shifty Stations
-                                    </template>
-                                </h3>
-                                <div class="columns">
-                                    <div class="column">
-                                        <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
-                                    </div>
-                                    <div class="column" v-if="shiftySchedule.stages[1]">
-                                        <Stage :stage="shiftySchedule.stages[1]" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="column" v-if="hasSalmonRun">
-                            <div class="salmon-run tilt-left">
-                                <div class="hook-box">
-                                    <SalmonRunBox />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }" v-if="hasWeapons && showWeaponsNextToSalmonRun">
-                            <NewWeaponsContainer :max-weapons-per-row="3" />
-                        </div>
-                    </div>
-
-                    <div style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }" v-if="showExtraWeaponsAtBottom">
-                        <NewWeaponsContainer />
-                    </div>
-                </div>
+        <div class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
+                <span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
+              </a>
             </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
-            <div class="container is-fluid">
-                {{ $t('ui.disclaimer') }}
-                &ndash;
-                <router-link to="/about">{{ $t('ui.about') }}</router-link>
-                &ndash;
-                <a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
-                <!-- &ndash; -->
-                <!-- <router-link to="/finalfest">FinalFest</router-link> -->
-                &ndash;
-                <router-link to="/calendars">Calendar Feeds</router-link>
-                &ndash;
-                <a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
-                <template v-if="hasSplatfests">
-                    &ndash;
-                    <router-link to="/splatfests">{{ $t('splatfest.previous') }}</router-link>
-                </template>
-                &ndash;
-                <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
+            <div class="level-item">
+              <a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
+                <span class="font-splatoon2">Splatoon 3</span>
+              </a>
+            </div>
+          </div>
+          <div class="level-right">
+            <div v-if="showFestivalRegionDropdown" class="level-item">
+              <Dropdown v-model="selectedRegionKey" :options="regions" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
             </div>
-        </div>
 
-        <router-view @close="$router.push('/')" />
+
+            <div v-if="showFestivalRegionDropdown" class="level-item">
+              <!-- Empty spacer to add some room when festivals are active -->
+            </div>
+
+            <div v-if="hasMerchandises" class="level-item">
+              <router-link to="/splatnet" class="button is-translucent-dark is-rounded">
+                <span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-</template>
 
-<style>
-#main .limited-width {
-    max-width: 1392px;
-    margin-left: auto;
-    margin-right: auto;
-}
-</style>
+    <!-- Main body area -->
+    <div class="hero-body">
+      <div class="container is-fluid">
+        <!-- Loading spinner -->
+        <div v-if="loading" class="has-text-centered">
+          <span class="icon is-large">
+            <span class="fa fa-3x fa-spin squid-refresh" />
+          </span>
+        </div>
+
+        <div v-else>
+          <!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
+          <div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
+            <div class="column">
+              <div class="splatfest tilt-left">
+                <div class="hook-box">
+                  <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
+                </div>
+              </div>
+            </div>
+            <div class="column">
+              <ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
+            </div>
+          </div>
+
+          <!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
+          <div v-else class="columns is-desktop">
+            <div class="column">
+              <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
+            </div>
+            <div class="column">
+              <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
+            </div>
+            <div class="column">
+              <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
+            </div>
+          </div>
+
+          <!-- Upcoming Splatfest and Salmon Run boxes -->
+          <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
+            <div v-if="showSplatfestOnBottomRow" class="column">
+              <div class="splatfest tilt-right" style="margin-top: 40px">
+                <div class="hook-box">
+                  <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
+                </div>
+              </div>
+            </div>
+
+            <div v-if="shiftySchedule" class="column">
+              <div class="shifty-box font-splatoon2 tilt-right">
+                <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
+                  <template v-if="shiftySchedule.stages.length === 1">
+                    Current Shifty Station
+                  </template>
+                  <template v-else>
+                    Current Shifty Stations
+                  </template>
+                </h3>
+                <div class="columns">
+                  <div class="column">
+                    <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
+                  </div>
+                  <div v-if="shiftySchedule.stages[1]" class="column">
+                    <Stage :stage="shiftySchedule.stages[1]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="hasSalmonRun" class="column">
+              <div class="salmon-run tilt-left">
+                <div class="hook-box">
+                  <SalmonRunBox />
+                </div>
+              </div>
+            </div>
+
+            <div v-if="hasWeapons && showWeaponsNextToSalmonRun" class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }">
+              <NewWeaponsContainer :max-weapons-per-row="3" />
+            </div>
+          </div>
+
+          <div v-if="showExtraWeaponsAtBottom" style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }">
+            <NewWeaponsContainer />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
+      <div class="container is-fluid">
+        {{ $t('ui.disclaimer') }}
+        &ndash;
+        <router-link to="/about">
+          {{ $t('ui.about') }}
+        </router-link>
+        &ndash;
+        <a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
+        <!-- &ndash; -->
+        <!-- <router-link to="/finalfest">FinalFest</router-link> -->
+        &ndash;
+        <router-link to="/calendars">
+          Calendar Feeds
+        </router-link>
+        &ndash;
+        <a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
+        <template v-if="hasSplatfests">
+          &ndash;
+          <router-link to="/splatfests">
+            {{ $t('splatfest.previous') }}
+          </router-link>
+        </template>
+        &ndash;
+        <Dropdown v-model="selectedLanguageKey" :options="languages" tag="a" class="is-right is-up" />
+      </div>
+    </div>
+
+    <router-view @close="$router.push('/')" />
+  </div>
+</template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
@@ -188,7 +189,7 @@ import Stage from '@/web/components/splatoon/Stage.vue';
 // import VoteBanner from '@/web/components/VoteBanner.vue';
 
 export default {
-    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponsContainer, Stage, /*VoteBanner*/ },
+    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponsContainer, Stage /*VoteBanner*/ },
     computed: {
         ...mapGetters('splatoon/regions', ['selectedRegion']),
         ...mapGetters('splatoon/languages', ['selectedLanguage']),
@@ -200,7 +201,7 @@ export default {
         ...mapGetters('splatoon/newWeapons', ['weapons']),
         ...mapGetters('splatoon/finalFest', { shiftySchedule: 'activeSchedule' }),
 
-        loading() { return !this.$store.state.splatoon.data.schedules },
+        loading() { return !this.$store.state.splatoon.data.schedules; },
 
         hasMerchandises() {
             let merchandises = this.$store.getters['splatoon/splatNetStore/merchandises'];
@@ -238,7 +239,7 @@ export default {
                 .reduce((languages, languageInfo) => {
                     // Remove duplicates
                     if (!languages.find(li => li.language == languageInfo.language))
-                        languages.push(languageInfo)
+                        languages.push(languageInfo);
                     return languages;
                 }, [])
                 .map(({ language, name }) => ({ key: language, name }));
@@ -289,5 +290,13 @@ export default {
         ...mapActions('splatoon/regions', ['setRegion']),
         ...mapActions('splatoon/languages', ['setLanguage']),
     },
-}
+};
 </script>
+
+<style>
+#main .limited-width {
+    max-width: 1392px;
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>
diff --git a/src/web/components/Modal.vue b/src/web/components/Modal.vue
index fc451ea..abc50a6 100644
--- a/src/web/components/Modal.vue
+++ b/src/web/components/Modal.vue
@@ -1,35 +1,13 @@
 <template>
-    <transition name="modal">
-        <div class="modal is-active" v-portal>
-            <div class="modal-background" @click="close"></div>
-            <slot></slot>
-            <button class="modal-close is-large" @click="close"></button>
-        </div>
-    </transition>
+  <transition name="modal">
+    <div v-portal class="modal is-active">
+      <div class="modal-background" @click="close" />
+      <slot />
+      <button class="modal-close is-large" @click="close" />
+    </div>
+  </transition>
 </template>
 
-<style lang="scss">
-.modal-enter-active, .modal-leave-active {
-    &, &>.modal-content, &>.modal-card {
-        transition: all 0.15s ease;
-    }
-}
-
-.modal-enter, .modal-leave-active {
-    opacity: 0;
-
-    &>.modal-content, &>.modal-card {
-        &.tilt-left-slight {
-            transform: rotate(-1.0deg) scale(0.98);
-        }
-        &.tilt-right-slight {
-            transform: rotate(1.0deg) scale(0.98);
-        }
-        transform: scale(0.98);
-    }
-}
-</style>
-
 <script>
 // This tracks open modals in order to add/remove the "has-modal" class to the body
 
@@ -74,5 +52,27 @@ export default {
             this.$emit('close');
         },
     },
-}
+};
 </script>
+
+<style lang="scss">
+.modal-enter-active, .modal-leave-active {
+    &, &>.modal-content, &>.modal-card {
+        transition: all 0.15s ease;
+    }
+}
+
+.modal-enter, .modal-leave-active {
+    opacity: 0;
+
+    &>.modal-content, &>.modal-card {
+        &.tilt-left-slight {
+            transform: rotate(-1.0deg) scale(0.98);
+        }
+        &.tilt-right-slight {
+            transform: rotate(1.0deg) scale(0.98);
+        }
+        transform: scale(0.98);
+    }
+}
+</style>
diff --git a/src/web/components/Screenshots.vue b/src/web/components/Screenshots.vue
index f0b7e85..fb63ecc 100644
--- a/src/web/components/Screenshots.vue
+++ b/src/web/components/Screenshots.vue
@@ -1,7 +1,7 @@
 <template>
-    <div id="screenshots">
-        <router-view></router-view>
-    </div>
+  <div id="screenshots">
+    <router-view />
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/VoteBanner.vue b/src/web/components/VoteBanner.vue
index 4e7ebc3..2730e16 100644
--- a/src/web/components/VoteBanner.vue
+++ b/src/web/components/VoteBanner.vue
@@ -1,26 +1,26 @@
 <template>
-    <div class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px" v-if="shouldShow">
-        <div class="container is-fluid">
-            <div style="width: 100%; display: flex; align-items: center">
-                <div class="has-text-centered" style="flex: 1; margin: 10px">
-                    <div>
-                        🗳️
-                        <strong>VOTE 2020!</strong>
-                        Make your voice heard this year!
+  <div v-if="shouldShow" class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px">
+    <div class="container is-fluid">
+      <div style="width: 100%; display: flex; align-items: center">
+        <div class="has-text-centered" style="flex: 1; margin: 10px">
+          <div>
+            🗳️
+            <strong>VOTE 2020!</strong>
+            Make your voice heard this year!
 
-                        Check
-                        <a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
-                        and
-                        <a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
-                        to get information for your state.
-                    </div>
-                </div>
-                <div style="margin: 5px">
-                    <a class="delete" @click.prevent="hide"></a>
-                </div>
-            </div>
+            Check
+            <a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
+            and
+            <a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
+            to get information for your state.
+          </div>
         </div>
+        <div style="margin: 5px">
+          <a class="delete" @click.prevent="hide" />
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -43,5 +43,5 @@ export default {
             this.shouldShow = false;
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/screenshots/ScreenshotHelper.vue b/src/web/components/screenshots/ScreenshotHelper.vue
index 1aa7a5f..19e91c2 100644
--- a/src/web/components/screenshots/ScreenshotHelper.vue
+++ b/src/web/components/screenshots/ScreenshotHelper.vue
@@ -1,61 +1,62 @@
 <template>
-    <div class="hero is-fullheight">
-        <div class="hero-body">
-            <div class="container has-text-centered">
-                <div v-if="latestSchedule">
-                    <strong>
-                        <router-link :to="`/schedules/${latestSchedule.start_time}`">
-                            Map Schedules
-                        </router-link>
-                    </strong>
-                </div>
-
-                <div v-if="latestGear">
-                    <strong>
-                        <router-link :to="`/splatNetGear/${latestGearTime}`">
-                            SplatNet Gear
-                        </router-link>
-                    </strong>
-                </div>
-
-                <div v-if="latestSalmonRun">
-                    <strong>
-                        <router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
-                            Salmon Run
-                        </router-link>
-                    </strong>
-                </div>
-
-                <div v-if="salmonRunGear">
-                    <strong>
-                        <router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
-                            Salmon Run Gear
-                        </router-link>
-                    </strong>
-                </div>
-
-                <div v-if="newWeaponAvailability">
-                    <strong>
-                        <router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
-                            New Weapon
-                        </router-link>
-                    </strong>
-                </div>
-
-                <div v-if="splatfests">
-                    Splatfest:
-                    <strong>
-                        <router-link
-                            v-for="splatfest in splatfests"
-                            :key="splatfest.region"
-                            :to="`/splatfest/${splatfest.region}/${splatfest.time}`">
-                            {{ splatfest.region }}
-                        </router-link>
-                    </strong>
-                </div>
-            </div>
+  <div class="hero is-fullheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div v-if="latestSchedule">
+          <strong>
+            <router-link :to="`/schedules/${latestSchedule.start_time}`">
+              Map Schedules
+            </router-link>
+          </strong>
         </div>
+
+        <div v-if="latestGear">
+          <strong>
+            <router-link :to="`/splatNetGear/${latestGearTime}`">
+              SplatNet Gear
+            </router-link>
+          </strong>
+        </div>
+
+        <div v-if="latestSalmonRun">
+          <strong>
+            <router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
+              Salmon Run
+            </router-link>
+          </strong>
+        </div>
+
+        <div v-if="salmonRunGear">
+          <strong>
+            <router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
+              Salmon Run Gear
+            </router-link>
+          </strong>
+        </div>
+
+        <div v-if="newWeaponAvailability">
+          <strong>
+            <router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
+              New Weapon
+            </router-link>
+          </strong>
+        </div>
+
+        <div v-if="splatfests">
+          Splatfest:
+          <strong>
+            <router-link
+              v-for="splatfest in splatfests"
+              :key="splatfest.region"
+              :to="`/splatfest/${splatfest.region}/${splatfest.time}`"
+            >
+              {{ splatfest.region }}
+            </router-link>
+          </strong>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/Wrapper.vue b/src/web/components/screenshots/Wrapper.vue
index e8d10fe..d6be020 100644
--- a/src/web/components/screenshots/Wrapper.vue
+++ b/src/web/components/screenshots/Wrapper.vue
@@ -1,65 +1,69 @@
 <template>
-    <div class="hero is-fullheight" id="main">
-        <div class="hero-body">
-            <div class="container">
-                <slot></slot>
-            </div>
-        </div>
+  <div id="main" class="hero is-fullheight">
+    <div class="hero-body">
+      <div class="container">
+        <slot />
+      </div>
+    </div>
 
-        <div class="hero-foot">
-            <div class="container">
-                <div class="level">
-                    <div class="level-left">
-                        <div class="level-item">
-                            <div class="image is-32x32">
-                                <img src="~@/web/assets/img/favicon.svg" />
-                            </div>
-                        </div>
-                        <div class="level-item">
-                            <h1 class="title is-4 font-splatoon2">{{ title }}</h1>
-                        </div>
-                        <div class="level-item">&nbsp;</div>
-                        <div class="level-item">
-                            <div class="font-splatoon2 is-size-7 has-text-grey-light">
-                                <div class="image is-16x16 bluesky-logo">
-                                    <img src="~@/web/assets/img/bluesky-white.svg" />
-                                </div>
-                                @splatoon2.ink
-                            </div>
-                        </div>
-                        <!-- <div class="level-item">&nbsp;</div>
+    <div class="hero-foot">
+      <div class="container">
+        <div class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <div class="image is-32x32">
+                <img src="~@/web/assets/img/favicon.svg" />
+              </div>
+            </div>
+            <div class="level-item">
+              <h1 class="title is-4 font-splatoon2">
+                {{ title }}
+              </h1>
+            </div>
+            <div class="level-item">
+&nbsp;
+            </div>
+            <div class="level-item">
+              <div class="font-splatoon2 is-size-7 has-text-grey-light">
+                <div class="image is-16x16 bluesky-logo">
+                  <img src="~@/web/assets/img/bluesky-white.svg" />
+                </div>
+                @splatoon2.ink
+              </div>
+            </div>
+            <!-- <div class="level-item">&nbsp;</div>
                         <div class="level-item">
                             <div class="font-splatoon2 is-size-7 has-text-grey-light">
                                 splatoon2.ink
                             </div>
                         </div> -->
-                    </div>
+          </div>
 
-                    <div class="level-right">
-                        <div class="level-item">
-                            <div class="font-splatoon2 is-size-6 has-text-white">
-                                {{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
-                            </div>
-                        </div>
-                        <div class="level-item" v-if="!hideLocalTimes">
-                            <div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
-                                <table>
-                                    <tr>
-                                        <td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
-                                        <td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
-                                        <td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
-                                    </tr>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+          <div class="level-right">
+            <div class="level-item">
+              <div class="font-splatoon2 is-size-6 has-text-white">
+                {{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
+              </div>
             </div>
+            <div v-if="!hideLocalTimes" class="level-item">
+              <div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
+                <table>
+                  <tr>
+                    <td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
+                    <td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
+                  </tr>
+                  <tr>
+                    <td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
+                    <td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -67,17 +71,17 @@ import { mapGetters } from 'vuex';
 import moment from 'moment-timezone';
 
 export default {
-    props: {
-        title: null,
-        hideLocalTimes: Boolean,
-    },
     filters: {
         dateTime(value, locale, timeZone, format = 'LLL z') {
             let date = moment.unix(value).tz(timeZone);
-            date.locale(locale)
+            date.locale(locale);
             return date.format(format);
         },
     },
+    props: {
+        title: null,
+        hideLocalTimes: Boolean,
+    },
     computed: {
         ...mapGetters('splatoon', ['now']),
     },
diff --git a/src/web/components/screenshots/newweapon/NewWeapon.vue b/src/web/components/screenshots/newweapon/NewWeapon.vue
index bacf87f..7ea943a 100644
--- a/src/web/components/screenshots/newweapon/NewWeapon.vue
+++ b/src/web/components/screenshots/newweapon/NewWeapon.vue
@@ -1,9 +1,9 @@
 <template>
-    <Wrapper :title="title">
-        <div :class="{ 'new-weapons-large': weapons.length <= 3 }" v-if="weapons">
-            <NewWeaponsContainer title="Now Available" />
-        </div>
-    </Wrapper>
+  <Wrapper :title="title">
+    <div v-if="weapons" :class="{ 'new-weapons-large': weapons.length <= 3 }">
+      <NewWeaponsContainer title="Now Available" />
+    </div>
+  </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/salmonrun/SalmonRun.vue b/src/web/components/screenshots/salmonrun/SalmonRun.vue
index 83ec8cd..534ac47 100644
--- a/src/web/components/screenshots/salmonrun/SalmonRun.vue
+++ b/src/web/components/screenshots/salmonrun/SalmonRun.vue
@@ -1,17 +1,17 @@
 <template>
-    <Wrapper title="Salmon Run">
-        <div class="salmon-run tilt-left">
-            <div class="hook-box">
-                <SalmonRunBox
-                    :useRelativeTime="true"
-                    :showCurrent="showCurrent"
-                    :showUpcoming="showUpcoming"
-                    :showRewardGear="showRewardGear"
-                    :hideUpcomingSchedulesWithoutDetails="true"
-                    />
-            </div>
-        </div>
-    </Wrapper>
+  <Wrapper title="Salmon Run">
+    <div class="salmon-run tilt-left">
+      <div class="hook-box">
+        <SalmonRunBox
+          :use-relative-time="true"
+          :show-current="showCurrent"
+          :show-upcoming="showUpcoming"
+          :show-reward-gear="showRewardGear"
+          :hide-upcoming-schedules-without-details="true"
+        />
+      </div>
+    </div>
+  </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/salmonrun/SalmonRunGear.vue b/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
index fc70b46..6aacc5e 100644
--- a/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
+++ b/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
@@ -1,9 +1,9 @@
 <template>
-    <Wrapper title="Salmon Run Gear">
-        <div class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;" v-if="rewardGear">
-            <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
-        </div>
-    </Wrapper>
+  <Wrapper title="Salmon Run Gear">
+    <div v-if="rewardGear" class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;">
+      <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
+    </div>
+  </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/schedules/ScheduleBox.vue b/src/web/components/screenshots/schedules/ScheduleBox.vue
index 8d8e7fe..958c475 100644
--- a/src/web/components/screenshots/schedules/ScheduleBox.vue
+++ b/src/web/components/screenshots/schedules/ScheduleBox.vue
@@ -1,41 +1,45 @@
 <template>
-    <div v-if="schedule" :class="mode">
-        <h3 class="title is-2 font-splatoon1 has-text-centered">
-            <template v-if="splatfestBattle">{{ $t('splatfest.battle') }}</template>
-            <template v-else>{{ schedule.game_mode.name }}</template>
-        </h3>
+  <div v-if="schedule" :class="mode">
+    <h3 class="title is-2 font-splatoon1 has-text-centered">
+      <template v-if="splatfestBattle">
+        {{ $t('splatfest.battle') }}
+      </template>
+      <template v-else>
+        {{ schedule.game_mode.name }}
+      </template>
+    </h3>
 
-        <h5 class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
-            <div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
-                <img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
-                <img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
-                <img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
-            </div>
+    <h5 v-if="!splatfestBattle" class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem">
+      <div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
+        <img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
+        <img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
+        <img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
+      </div>
 
-            {{ schedule.rule.name }}
-        </h5>
+      {{ schedule.rule.name }}
+    </h5>
 
-        <div v-if="splatfestBattle && currentSplatfest">
-            <div class="columns">
-                <div class="column">
-                    <Stage :stage="schedule.stage_a" />
-                </div>
-                <div class="column">
-                    <Stage :stage="schedule.stage_b" />
-                </div>
-            </div>
-
-            <div class="columns">
-                <div class="column is-half is-offset-one-quarter">
-            <Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
-                </div>
-            </div>
+    <div v-if="splatfestBattle && currentSplatfest">
+      <div class="columns">
+        <div class="column">
+          <Stage :stage="schedule.stage_a" />
         </div>
-        <div v-else>
-            <Stage :stage="schedule.stage_a" />
-            <Stage :stage="schedule.stage_b" />
+        <div class="column">
+          <Stage :stage="schedule.stage_b" />
         </div>
+      </div>
+
+      <div class="columns">
+        <div class="column is-half is-offset-one-quarter">
+          <Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
+        </div>
+      </div>
     </div>
+    <div v-else>
+      <Stage :stage="schedule.stage_a" />
+      <Stage :stage="schedule.stage_b" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -54,5 +58,5 @@ export default {
             return this.$store.getters[`splatoon/schedules/${this.mode}/activeSchedule`];
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/screenshots/schedules/Schedules.vue b/src/web/components/screenshots/schedules/Schedules.vue
index 3bee7c9..f535a73 100644
--- a/src/web/components/screenshots/schedules/Schedules.vue
+++ b/src/web/components/screenshots/schedules/Schedules.vue
@@ -1,54 +1,54 @@
 <template>
-    <Wrapper title="Map Schedules">
-        <div class="columns font-splatoon2" v-if="!globalSplatfestIsActiveInAllRegions">
-            <div class="column">
-                <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
-            </div>
+  <Wrapper title="Map Schedules">
+    <div v-if="!globalSplatfestIsActiveInAllRegions" class="columns font-splatoon2">
+      <div class="column">
+        <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
+      </div>
 
-            <div class="column">
-                <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
-            </div>
+      <div class="column">
+        <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
+      </div>
 
-            <div class="column">
-                <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
-            </div>
-        </div>
-        <div class="columns font-splatoon2" v-else>
-            <div class="column" style="display: flex">
-                <div class="splatfest">
-                    <div class="hook-box">
-                        <SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
-                    </div>
+      <div class="column">
+        <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
+      </div>
+    </div>
+    <div v-else class="columns font-splatoon2">
+      <div class="column" style="display: flex">
+        <div class="splatfest">
+          <div class="hook-box">
+            <SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
+          </div>
 
-                    <template v-if="shiftySchedule">
-                        <br />
+          <template v-if="shiftySchedule">
+            <br />
 
-                        <div class="shifty-box">
-                            <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
-                                <template v-if="shiftySchedule.stages.length === 1">
-                                    Current Shifty Station
-                                </template>
-                                <template v-else>
-                                    Current Shifty Stations
-                                </template>
-                            </h3>
-                            <div class="columns">
-                                <div class="column">
-                                    <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
-                                </div>
-                                <div class="column" v-if="shiftySchedule.stages[1]">
-                                    <Stage :stage="shiftySchedule.stages[1]" />
-                                </div>
-                            </div>
-                        </div>
-                    </template>
+            <div class="shifty-box">
+              <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
+                <template v-if="shiftySchedule.stages.length === 1">
+                  Current Shifty Station
+                </template>
+                <template v-else>
+                  Current Shifty Stations
+                </template>
+              </h3>
+              <div class="columns">
+                <div class="column">
+                  <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
                 </div>
+                <div v-if="shiftySchedule.stages[1]" class="column">
+                  <Stage :stage="shiftySchedule.stages[1]" />
+                </div>
+              </div>
             </div>
-            <div class="column">
-                <ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
-            </div>
+          </template>
         </div>
-    </Wrapper>
+      </div>
+      <div class="column">
+        <ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
+      </div>
+    </div>
+  </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/splatfest/Splatfest.vue b/src/web/components/screenshots/splatfest/Splatfest.vue
index 5422817..5106421 100644
--- a/src/web/components/screenshots/splatfest/Splatfest.vue
+++ b/src/web/components/screenshots/splatfest/Splatfest.vue
@@ -1,19 +1,19 @@
 <template>
-    <Wrapper :title="title" class="splatfest-screenshot" v-if="festival" hide-local-times>
-        <div class="level">
-            <div class="level-item">
-                <div class="splatfest tilt-left">
-                    <div class="hook-box">
-                        <SplatfestBox :festival="festival" screenshot-mode />
-                    </div>
-                </div>
-            </div>
-
-            <div class="level-item" v-if="festival.results">
-                <SplatfestResultsBox :festival="festival" />
-            </div>
+  <Wrapper v-if="festival" :title="title" class="splatfest-screenshot" hide-local-times>
+    <div class="level">
+      <div class="level-item">
+        <div class="splatfest tilt-left">
+          <div class="hook-box">
+            <SplatfestBox :festival="festival" screenshot-mode />
+          </div>
         </div>
-    </Wrapper>
+      </div>
+
+      <div v-if="festival.results" class="level-item">
+        <SplatfestResultsBox :festival="festival" />
+      </div>
+    </div>
+  </Wrapper>
 </template>
 
 <script>
@@ -53,5 +53,5 @@ export default {
             this.$i18n.set('ja');
         }
     },
-}
+};
 </script>
diff --git a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
index 01c3ee9..e2e1306 100644
--- a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
+++ b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
@@ -1,25 +1,25 @@
 <template>
-    <Wrapper title="SplatNet Gear" v-if="merchandises">
-        <div class="columns">
-            <div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
-                <MerchandiseBox
-                    :merchandise="featuredMerchandise"
-                    class="featured-merchandise"
-                    />
-            </div>
+  <Wrapper v-if="merchandises" title="SplatNet Gear">
+    <div class="columns">
+      <div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
+        <MerchandiseBox
+          :merchandise="featuredMerchandise"
+          class="featured-merchandise"
+        />
+      </div>
 
-            <div class="column" style="display: flex; align-items: center; justify-content: center;">
-                <div class="still-available-merchandise columns is-multiline is-centered">
-                    <div class="column is-one-third" v-for="(merchandise, index) in otherMerchandises" :key="index">
-                        <MerchandiseBox
-                            :merchandise="merchandise"
-                            :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-                            />
-                    </div>
-                </div>
-            </div>
+      <div class="column" style="display: flex; align-items: center; justify-content: center;">
+        <div class="still-available-merchandise columns is-multiline is-centered">
+          <div v-for="(merchandise, index) in otherMerchandises" :key="index" class="column is-one-third">
+            <MerchandiseBox
+              :merchandise="merchandise"
+              :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+            />
+          </div>
         </div>
-    </Wrapper>
+      </div>
+    </div>
+  </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/FinalFestDialog.vue b/src/web/components/splatoon/FinalFestDialog.vue
index b69d67f..dc402e0 100644
--- a/src/web/components/splatoon/FinalFestDialog.vue
+++ b/src/web/components/splatoon/FinalFestDialog.vue
@@ -1,66 +1,68 @@
 <template>
-    <Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="allSchedules">
-        <div class="modal-card">
-            <div class="modal-card-head">
-                <h3 class="title is-3 font-splatoon1 text-shadow">FinalFest Shifty&nbsp;Station Schedule</h3>
-            </div>
+  <Modal v-if="allSchedules" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
+    <div class="modal-card">
+      <div class="modal-card-head">
+        <h3 class="title is-3 font-splatoon1 text-shadow">
+          FinalFest Shifty&nbsp;Station Schedule
+        </h3>
+      </div>
 
-            <div class="modal-card-body" ref="body">
-                <div class="has-text-right" style="margin-bottom: 1em">
-                    <p>
-                        Schedules:
-                        <a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
-                            @SplatoonJP
-                        </a>
-                    </p>
-                    <p>
-                        Stage images and names:
-                        <a href="https://leanny.github.io/feststages/" target="_blank">
-                            LeanYoshi
-                        </a>
-                    </p>
-                </div>
-
-                <div class="font-splatoon2">
-                    <div v-if="first">
-                        <div class="is-size-5 title-squid font-splatoon1">
-                            <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
-                            <span v-else>{{ $t('times.soon') }}</span>
-                        </div>
-
-                        <ScheduleRow :schedule="first" />
-                    </div>
-                    <div v-if="second">
-                        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-                            {{ $t('times.next') }}
-                        </div>
-
-                        <ScheduleRow :schedule="second" />
-                    </div>
-
-                    <div v-if="others && others.length">
-                        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-                            {{ $t('times.future') }}
-                        </div>
-
-                        <ScheduleRow
-                            v-for="schedule in others"
-                            :key="schedule.start_time"
-                            :schedule="schedule"
-                            />
-                    </div>
-                </div>
-
-                <div  class="font-splatoon2" v-if="currentSchedules.length === 0">
-                    <ScheduleRow
-                        v-for="schedule in allSchedules"
-                        :key="schedule.start_time"
-                        :schedule="schedule"
-                        />
-                </div>
-            </div>
+      <div ref="body" class="modal-card-body">
+        <div class="has-text-right" style="margin-bottom: 1em">
+          <p>
+            Schedules:
+            <a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
+              @SplatoonJP
+            </a>
+          </p>
+          <p>
+            Stage images and names:
+            <a href="https://leanny.github.io/feststages/" target="_blank">
+              LeanYoshi
+            </a>
+          </p>
         </div>
-    </Modal>
+
+        <div class="font-splatoon2">
+          <div v-if="first">
+            <div class="is-size-5 title-squid font-splatoon1">
+              <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
+              <span v-else>{{ $t('times.soon') }}</span>
+            </div>
+
+            <ScheduleRow :schedule="first" />
+          </div>
+          <div v-if="second">
+            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+              {{ $t('times.next') }}
+            </div>
+
+            <ScheduleRow :schedule="second" />
+          </div>
+
+          <div v-if="others && others.length">
+            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+              {{ $t('times.future') }}
+            </div>
+
+            <ScheduleRow
+              v-for="schedule in others"
+              :key="schedule.start_time"
+              :schedule="schedule"
+            />
+          </div>
+        </div>
+
+        <div v-if="currentSchedules.length === 0" class="font-splatoon2">
+          <ScheduleRow
+            v-for="schedule in allSchedules"
+            :key="schedule.start_time"
+            :schedule="schedule"
+          />
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/GameModeHeader.vue b/src/web/components/splatoon/GameModeHeader.vue
index 512bb03..a3d7984 100644
--- a/src/web/components/splatoon/GameModeHeader.vue
+++ b/src/web/components/splatoon/GameModeHeader.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="level">
-        <div class="level-left">
-            <div class="level-item">
-                <div class="image is-48x48" style="margin-bottom: -6px">
-                    <img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
-                    <img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
-                    <img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
-                </div>
-            </div>
-            <div class="level-item">
-                <h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
-                    <template>{{ name }}</template>
-                </h2>
-            </div>
+  <div class="level">
+    <div class="level-left">
+      <div class="level-item">
+        <div class="image is-48x48" style="margin-bottom: -6px">
+          <img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
+          <img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
+          <img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
         </div>
+      </div>
+      <div class="level-item">
+        <h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
+          <template>{{ name }}</template>
+        </h2>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -31,5 +31,5 @@ export default {
             return this.$t(`game_mode.${this.mode}`);
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/IdolResultsBox.vue b/src/web/components/splatoon/IdolResultsBox.vue
index b9d9620..d483138 100644
--- a/src/web/components/splatoon/IdolResultsBox.vue
+++ b/src/web/components/splatoon/IdolResultsBox.vue
@@ -1,37 +1,37 @@
 <template>
-    <div class="splatfest-results">
-        <div class="background"></div>
+  <div class="splatfest-results">
+    <div class="background" />
 
-        <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
-            {{ $t('splatfest.results.title') }}
-        </div>
-
-        <div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
-            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
-                {{ $t('splatfest.results.title') }}
-            </div>
-
-            <div class="column">
-                <div class="image is-48x48">
-                    <img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
-                </div>
-            </div>
-
-            <div class="column is-5">
-                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
-            </div>
-
-            <div class="column">
-                <div class="image is-48x48">
-                    <img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
-                </div>
-            </div>
-        </div>
-
-        <IdolResultsRow region="na" />
-        <IdolResultsRow region="eu" />
-        <IdolResultsRow region="jp" />
+    <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
+      {{ $t('splatfest.results.title') }}
     </div>
+
+    <div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
+      <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
+        {{ $t('splatfest.results.title') }}
+      </div>
+
+      <div class="column">
+        <div class="image is-48x48">
+          <img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
+        </div>
+      </div>
+
+      <div class="column is-5">
+        <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
+      </div>
+
+      <div class="column">
+        <div class="image is-48x48">
+          <img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
+        </div>
+      </div>
+    </div>
+
+    <IdolResultsRow region="na" />
+    <IdolResultsRow region="eu" />
+    <IdolResultsRow region="jp" />
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/IdolResultsRow.vue b/src/web/components/splatoon/IdolResultsRow.vue
index 24b7775..6e7ba9e 100644
--- a/src/web/components/splatoon/IdolResultsRow.vue
+++ b/src/web/components/splatoon/IdolResultsRow.vue
@@ -1,31 +1,31 @@
 <template>
-    <div class="columns is-mobile result">
-        <div class="column">
-            <div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
-            <div class="winner-mark" style="background: #f2327b" v-if="winner == 'alpha'"></div>
-            <div class="result-container">
-                <div class="font-splatoon2 title is-4">
-                    <div>{{ heroWins.alpha }}</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="column is-5 has-text-centered font-splatoon2">
-            <div style="margin: 0 -100px">
-                {{ $t(`regions.${region}.name`) }}
-            </div>
-        </div>
-
-        <div class="column">
-            <div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
-            <div class="winner-mark" style="background: #10dc85" v-if="winner == 'bravo'"></div>
-            <div class="result-container">
-                <div class="font-splatoon2 title is-4">
-                    <div>{{ heroWins.bravo }}</div>
-                </div>
-            </div>
+  <div class="columns is-mobile result">
+    <div class="column">
+      <div v-if="winner == 'alpha'" class="winner-mark-shadow" />
+      <div v-if="winner == 'alpha'" class="winner-mark" style="background: #f2327b" />
+      <div class="result-container">
+        <div class="font-splatoon2 title is-4">
+          <div>{{ heroWins.alpha }}</div>
         </div>
+      </div>
     </div>
+
+    <div class="column is-5 has-text-centered font-splatoon2">
+      <div style="margin: 0 -100px">
+        {{ $t(`regions.${region}.name`) }}
+      </div>
+    </div>
+
+    <div class="column">
+      <div v-if="winner == 'bravo'" class="winner-mark-shadow" />
+      <div v-if="winner == 'bravo'" class="winner-mark" style="background: #10dc85" />
+      <div class="result-container">
+        <div class="font-splatoon2 title is-4">
+          <div>{{ heroWins.bravo }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/MerchandiseBox.vue b/src/web/components/splatoon/MerchandiseBox.vue
index 5479941..6ffdd72 100644
--- a/src/web/components/splatoon/MerchandiseBox.vue
+++ b/src/web/components/splatoon/MerchandiseBox.vue
@@ -1,76 +1,80 @@
 <template>
-    <div class="merchandise-box font-splatoon2" :class="merchandise.kind">
-        <div class="brand">
-            <div class="image is-32x32">
-                <img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
-            </div>
-        </div>
-
-        <div class="skills">
-            <div class="main skill-img-bg" v-if="merchandise.skill">
-                <img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
-            </div>
-            <div class="sub" v-for="i in merchandise.gear.rarity + 1" :key="i">
-                <img src="~@/web/assets/img/blank-skill-slot.png" />
-            </div>
-        </div>
-
-        <div class="is-size-6 title-squid remaining-time" v-if="merchandise.end_time">
-            {{ merchandise.end_time - now | shortDuration }}
-        </div>
-
-        <div class="gear-image">
-            <div class="image is-square">
-                <img :src="merchandise.gear.image | localSplatNetImageUrl" />
-            </div>
-        </div>
-
-        <div class="gear-name has-text-centered">
-            {{ gearName }}
-
-            <div class="info-overlay">
-                <div class="info-overlay-container original-gear" v-if="merchandise.original_gear">
-                    <div class="is-size-7">{{ $t('splatnet_gear.original_gear') }}</div>
-
-                    <div class="level" style="margin: 0 3px">
-                        <div class="level-left">
-                            <div class="level-item">
-                                <div class="skill-img-bg strikethrough">
-                                    <img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
-                                </div>
-                                <div class="sub" v-for="i in merchandise.original_gear.rarity + 1" :key="i">
-                                    <img src="~@/web/assets/img/blank-skill-slot.png" />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="level-right" v-if="merchandise.original_gear.price">
-                            <div class="level-item">
-                                <div>
-                                    <img class="cash" src="~@/web/assets/img/cash.png" />
-                                    <span class="strikethrough">{{ merchandise.original_gear.price }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="info-overlay-container common-ability" v-if="merchandise.gear.brand.frequent_skill">
-                    <div class="is-size-7">{{ $t('gear.frequent_ability') }}</div>
-                    <div>
-                        <div class="skill-img-bg">
-                            <img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
-                        </div>
-                        {{ brandName }}
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="bottom-bar has-text-centered" v-if="merchandise.price">
-            <img class="cash" src="~@/web/assets/img/cash.png" />
-            {{ merchandise.price }}
-        </div>
+  <div class="merchandise-box font-splatoon2" :class="merchandise.kind">
+    <div class="brand">
+      <div class="image is-32x32">
+        <img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
+      </div>
     </div>
+
+    <div class="skills">
+      <div v-if="merchandise.skill" class="main skill-img-bg">
+        <img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
+      </div>
+      <div v-for="i in merchandise.gear.rarity + 1" :key="i" class="sub">
+        <img src="~@/web/assets/img/blank-skill-slot.png" />
+      </div>
+    </div>
+
+    <div v-if="merchandise.end_time" class="is-size-6 title-squid remaining-time">
+      {{ merchandise.end_time - now | shortDuration }}
+    </div>
+
+    <div class="gear-image">
+      <div class="image is-square">
+        <img :src="merchandise.gear.image | localSplatNetImageUrl" />
+      </div>
+    </div>
+
+    <div class="gear-name has-text-centered">
+      {{ gearName }}
+
+      <div class="info-overlay">
+        <div v-if="merchandise.original_gear" class="info-overlay-container original-gear">
+          <div class="is-size-7">
+            {{ $t('splatnet_gear.original_gear') }}
+          </div>
+
+          <div class="level" style="margin: 0 3px">
+            <div class="level-left">
+              <div class="level-item">
+                <div class="skill-img-bg strikethrough">
+                  <img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
+                </div>
+                <div v-for="i in merchandise.original_gear.rarity + 1" :key="i" class="sub">
+                  <img src="~@/web/assets/img/blank-skill-slot.png" />
+                </div>
+              </div>
+            </div>
+            <div v-if="merchandise.original_gear.price" class="level-right">
+              <div class="level-item">
+                <div>
+                  <img class="cash" src="~@/web/assets/img/cash.png" />
+                  <span class="strikethrough">{{ merchandise.original_gear.price }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="merchandise.gear.brand.frequent_skill" class="info-overlay-container common-ability">
+          <div class="is-size-7">
+            {{ $t('gear.frequent_ability') }}
+          </div>
+          <div>
+            <div class="skill-img-bg">
+              <img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
+            </div>
+            {{ brandName }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="merchandise.price" class="bottom-bar has-text-centered">
+      <img class="cash" src="~@/web/assets/img/cash.png" />
+      {{ merchandise.price }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -103,5 +107,5 @@ export default {
             return this.$t(`splatnet.gear.${gear.kind}.${gear.id}.name`, gear.name);
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/NewWeaponBox.vue b/src/web/components/splatoon/NewWeaponBox.vue
index 362e9d9..9af9ff9 100644
--- a/src/web/components/splatoon/NewWeaponBox.vue
+++ b/src/web/components/splatoon/NewWeaponBox.vue
@@ -1,35 +1,33 @@
 <template>
-    <div class="new-weapon-box font-splatoon2">
-
-        <div class="font-splatoon1 is-size-5 title-squid">
-            {{ displayTitle }}
-        </div>
-
-        <div class="main-content-wrapper">
-            <div class="weapon-special-sub">
-                <div class="image-wrapper" :title="specialName">
-                    <div class="image is-24x24">
-                        <img :src="weapon.special.image_a | localSplatNetImageUrl" />
-                    </div>
-                </div>
-
-                <div class="image-wrapper" :title="subName">
-                    <div class="image is-24x24">
-                        <img :src="weapon.sub.image_a | localSplatNetImageUrl" />
-                    </div>
-                </div>
-            </div>
-
-            <div class="image is-square">
-                <img :src="weapon.image | localSplatNetImageUrl" />
-            </div>
-
-            <div class="weapon-name has-text-centered is-size-5">
-                {{ name }}
-            </div>
-        </div>
-
+  <div class="new-weapon-box font-splatoon2">
+    <div class="font-splatoon1 is-size-5 title-squid">
+      {{ displayTitle }}
     </div>
+
+    <div class="main-content-wrapper">
+      <div class="weapon-special-sub">
+        <div class="image-wrapper" :title="specialName">
+          <div class="image is-24x24">
+            <img :src="weapon.special.image_a | localSplatNetImageUrl" />
+          </div>
+        </div>
+
+        <div class="image-wrapper" :title="subName">
+          <div class="image is-24x24">
+            <img :src="weapon.sub.image_a | localSplatNetImageUrl" />
+          </div>
+        </div>
+      </div>
+
+      <div class="image is-square">
+        <img :src="weapon.image | localSplatNetImageUrl" />
+      </div>
+
+      <div class="weapon-name has-text-centered is-size-5">
+        {{ name }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -53,6 +51,6 @@ export default {
             let special = this.weapon.special;
             return 'Special: ' + this.$t(`splatnet.weapon_specials.${special.id}.name`, special.name);
         },
-    }
-}
+    },
+};
 </script>
diff --git a/src/web/components/splatoon/NewWeaponsContainer.vue b/src/web/components/splatoon/NewWeaponsContainer.vue
index 2cf6ccb..25884b1 100644
--- a/src/web/components/splatoon/NewWeaponsContainer.vue
+++ b/src/web/components/splatoon/NewWeaponsContainer.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="columns is-multiline is-centered">
-        <div class="column" :class="columnClass" v-for="(weapon, index) in weapons" :key="weapon.id">
-            <NewWeaponBox
-                :weapon="weapon"
-                :title="title"
-                :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-                />
-        </div>
+  <div class="columns is-multiline is-centered">
+    <div v-for="(weapon, index) in weapons" :key="weapon.id" class="column" :class="columnClass">
+      <NewWeaponBox
+        :weapon="weapon"
+        :title="title"
+        :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+      />
     </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SalmonRunBox.vue b/src/web/components/splatoon/SalmonRunBox.vue
index 5f6f3cf..71af7f5 100644
--- a/src/web/components/splatoon/SalmonRunBox.vue
+++ b/src/web/components/splatoon/SalmonRunBox.vue
@@ -1,118 +1,118 @@
 <template>
-    <div class="font-splatoon2">
-        <div class="salmon-run-header">
-            <div class="level">
-                <div class="level-left">
-                    <div class="level-item">
-                        <div class="image is-48x48">
-                            <img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
-                        </div>
-                    </div>
-                    <div class="level-item">
-                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-                            {{ $t('coop.title') }}
-                        </h2>
-                    </div>
-                </div>
+  <div class="font-splatoon2">
+    <div class="salmon-run-header">
+      <div class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <div class="image is-48x48">
+              <img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
             </div>
+          </div>
+          <div class="level-item">
+            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+              {{ $t('coop.title') }}
+            </h2>
+          </div>
         </div>
-
-        <div class="columns is-gapless">
-            <div class="column is-4 salmon-run-ad-img">
-                <div class="image is-16by9 is-hidden-desktop"></div>
-
-                <template v-if="showRewardGear && rewardGear">
-                    <div class="salmon-run-gear-text">
-                        {{ $t('coop.current_gear') }}
-                    </div>
-                    <div class="salmon-run-gear-image hand" @click="gearDialogOpen = true" :title="rewardGearName">
-                        <div class="image is-32x32">
-                            <img :src="rewardGear.image | localSplatNetImageUrl" />
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div class="column">
-                <div class="salmon-run-content">
-                    <div class="salmon-run-open" v-if="showCurrent && activeSchedule">
-                        <div class="is-size-5 title-squid font-splatoon1">
-                            {{ $t('times.open') }}
-                        </div>
-                        <template v-if="useRelativeTime">
-                            <div class="title-color is-size-5">
-                                {{ activeSchedule.end_time - now | durationHours | time.remaining }}
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div class="title-color is-size-5">
-                                {{ activeSchedule.start_time | date }}
-                                {{ activeSchedule.start_time | time }}
-                                &ndash;
-                                {{ activeSchedule.end_time | date }}
-                                {{ activeSchedule.end_time | time }}
-                            </div>
-                            <div>
-                                {{ activeSchedule.end_time - now | duration | time.remaining }}
-                            </div>
-                        </template>
-
-                        <div class="salmon-run-details">
-                            <SalmonRunDetailsBar :schedule="activeSchedule" />
-                        </div>
-                    </div>
-
-                    <div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
-                        <div class="salmon-run-future">
-                            <div class="is-size-6 title-squid font-splatoon1">
-                                {{ $t('times.soon') }}
-                            </div>
-                            <div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
-                                <div class="columns is-marginless is-gapless is-mobile">
-                                    <div class="column is-narrow" style="margin-right: 5px">
-                                        <div class="image is-4by3" style="width: 23px">
-                                            <img src="~@/web/assets/img/salmon-run-mini.png" />
-                                        </div>
-                                    </div>
-                                    <div class="column" v-if="useRelativeTime">
-                                        <span class="title-color is-size-6">
-                                            Shift opens
-                                            {{ event.start_time - now | durationHours | time.in }}
-                                        </span>
-                                        <span class="is-size-7 is-pulled-right">
-                                            {{ event.end_time - event.start_time | durationHours }}
-                                        </span>
-                                    </div>
-                                    <div class="column" v-else>
-                                        <span class="title-color is-size-6">
-                                            <span class="nowrap">
-                                                {{ event.start_time | date({ weekday: 'short' }) }}
-                                                {{ event.start_time | time }}
-                                            </span>
-                                            &ndash;
-                                            <span class="nowrap">
-                                                {{ event.end_time | date }}
-                                                {{ event.end_time | time }}
-                                            </span>
-                                        </span>
-                                        <span class="is-size-7 is-hidden-touch is-pulled-right">
-                                            {{ event.start_time - now | duration(true) | time.in }}
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <SalmonRunDetailsBar :schedule="event" mini />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <SalmonRunGearDialog
-            v-if="gearDialogOpen && rewardGear"
-            @close="gearDialogOpen = false"
-            />
+      </div>
     </div>
+
+    <div class="columns is-gapless">
+      <div class="column is-4 salmon-run-ad-img">
+        <div class="image is-16by9 is-hidden-desktop" />
+
+        <template v-if="showRewardGear && rewardGear">
+          <div class="salmon-run-gear-text">
+            {{ $t('coop.current_gear') }}
+          </div>
+          <div class="salmon-run-gear-image hand" :title="rewardGearName" @click="gearDialogOpen = true">
+            <div class="image is-32x32">
+              <img :src="rewardGear.image | localSplatNetImageUrl" />
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="column">
+        <div class="salmon-run-content">
+          <div v-if="showCurrent && activeSchedule" class="salmon-run-open">
+            <div class="is-size-5 title-squid font-splatoon1">
+              {{ $t('times.open') }}
+            </div>
+            <template v-if="useRelativeTime">
+              <div class="title-color is-size-5">
+                {{ activeSchedule.end_time - now | durationHours | time.remaining }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="title-color is-size-5">
+                {{ activeSchedule.start_time | date }}
+                {{ activeSchedule.start_time | time }}
+                &ndash;
+                {{ activeSchedule.end_time | date }}
+                {{ activeSchedule.end_time | time }}
+              </div>
+              <div>
+                {{ activeSchedule.end_time - now | duration | time.remaining }}
+              </div>
+            </template>
+
+            <div class="salmon-run-details">
+              <SalmonRunDetailsBar :schedule="activeSchedule" />
+            </div>
+          </div>
+
+          <div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
+            <div class="salmon-run-future">
+              <div class="is-size-6 title-squid font-splatoon1">
+                {{ $t('times.soon') }}
+              </div>
+              <div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
+                <div class="columns is-marginless is-gapless is-mobile">
+                  <div class="column is-narrow" style="margin-right: 5px">
+                    <div class="image is-4by3" style="width: 23px">
+                      <img src="~@/web/assets/img/salmon-run-mini.png" />
+                    </div>
+                  </div>
+                  <div v-if="useRelativeTime" class="column">
+                    <span class="title-color is-size-6">
+                      Shift opens
+                      {{ event.start_time - now | durationHours | time.in }}
+                    </span>
+                    <span class="is-size-7 is-pulled-right">
+                      {{ event.end_time - event.start_time | durationHours }}
+                    </span>
+                  </div>
+                  <div v-else class="column">
+                    <span class="title-color is-size-6">
+                      <span class="nowrap">
+                        {{ event.start_time | date({ weekday: 'short' }) }}
+                        {{ event.start_time | time }}
+                      </span>
+                      &ndash;
+                      <span class="nowrap">
+                        {{ event.end_time | date }}
+                        {{ event.end_time | time }}
+                      </span>
+                    </span>
+                    <span class="is-size-7 is-hidden-touch is-pulled-right">
+                      {{ event.start_time - now | duration(true) | time.in }}
+                    </span>
+                  </div>
+                </div>
+
+                <SalmonRunDetailsBar :schedule="event" mini />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <SalmonRunGearDialog
+      v-if="gearDialogOpen && rewardGear"
+      @close="gearDialogOpen = false"
+    />
+  </div>
 </template>
 
 <script>
@@ -149,5 +149,5 @@ export default {
             });
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/SalmonRunDetailsBar.vue b/src/web/components/splatoon/SalmonRunDetailsBar.vue
index fe6a7f1..fe0e21d 100644
--- a/src/web/components/splatoon/SalmonRunDetailsBar.vue
+++ b/src/web/components/splatoon/SalmonRunDetailsBar.vue
@@ -1,43 +1,45 @@
 <template>
-    <div class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0" v-if="schedule.stage || schedule.weapons">
-        <div class="column" :class="mini ? 'is-3' : 'is-5'" v-if="schedule.stage">
-            <Stage :stage="schedule.stage" is-salmon-run :showTitle="!mini"></Stage>
-        </div>
-
-        <div class="column" style="display: flex; align-items: center;" v-if="mini && schedule.stage">
-            {{ stageName }}
-        </div>
-
-        <div class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;" v-if="schedule.weapons">
-            <div style="width: 100%">
-                <div class="has-text-centered" v-if="!mini">{{ $t('coop.supplied_weapons') }}</div>
-
-                <div class="columns is-mobile is-slimmer">
-                    <div class="column" v-for="(weapon, i) in schedule.weapons" :key="i">
-                        <div class="image is-square weapon">
-                            <template v-if="weapon.weapon">
-                                <img
-                                    :src="weapon.weapon.image | localSplatNetImageUrl"
-                                    :title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
-                                    />
-                            </template>
-
-                            <template v-else-if="weapon.coop_special_weapon">
-                                <img
-                                    :src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
-                                    :title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
-                                    />
-                            </template>
-
-                            <template v-else>
-                                <img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div v-if="schedule.stage || schedule.weapons" class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0">
+    <div v-if="schedule.stage" class="column" :class="mini ? 'is-3' : 'is-5'">
+      <Stage :stage="schedule.stage" is-salmon-run :show-title="!mini" />
     </div>
+
+    <div v-if="mini && schedule.stage" class="column" style="display: flex; align-items: center;">
+      {{ stageName }}
+    </div>
+
+    <div v-if="schedule.weapons" class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;">
+      <div style="width: 100%">
+        <div v-if="!mini" class="has-text-centered">
+          {{ $t('coop.supplied_weapons') }}
+        </div>
+
+        <div class="columns is-mobile is-slimmer">
+          <div v-for="(weapon, i) in schedule.weapons" :key="i" class="column">
+            <div class="image is-square weapon">
+              <template v-if="weapon.weapon">
+                <img
+                  :src="weapon.weapon.image | localSplatNetImageUrl"
+                  :title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
+                />
+              </template>
+
+              <template v-else-if="weapon.coop_special_weapon">
+                <img
+                  :src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
+                  :title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
+                />
+              </template>
+
+              <template v-else>
+                <img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -55,5 +57,5 @@ export default {
             return this.$t(`splatnet.coop_stages.${stage.image}.name`, stage.name);
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/SalmonRunGearDialog.vue b/src/web/components/splatoon/SalmonRunGearDialog.vue
index bfd8db7..bb1e0ba 100644
--- a/src/web/components/splatoon/SalmonRunGearDialog.vue
+++ b/src/web/components/splatoon/SalmonRunGearDialog.vue
@@ -1,11 +1,11 @@
 <template>
-    <Modal @close="$emit('close')">
-        <div class="modal-content" style="max-width: 300px; overflow: visible">
-            <div class="tilt-right" style="overflow: hidden">
-                <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
-            </div>
-        </div>
-    </Modal>
+  <Modal @close="$emit('close')">
+    <div class="modal-content" style="max-width: 300px; overflow: visible">
+      <div class="tilt-right" style="overflow: hidden">
+        <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script>
@@ -21,5 +21,5 @@ export default {
             return { gear: this.rewardGear };
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/ScheduleBox.vue b/src/web/components/splatoon/ScheduleBox.vue
index 711dd9b..c2923c6 100644
--- a/src/web/components/splatoon/ScheduleBox.vue
+++ b/src/web/components/splatoon/ScheduleBox.vue
@@ -1,46 +1,54 @@
 <template>
-    <div class="font-splatoon2" :class="mode">
-        <GameModeHeader :mode="mode" />
+  <div class="font-splatoon2" :class="mode">
+    <GameModeHeader :mode="mode" />
 
-        <div class="main-schedule" v-if="activeSchedule">
-            <div class="level is-mobile top-bar">
-                <div class="level-left">
-                    <div class="level-item title-color is-size-5">{{ activeRuleName }}</div>
-                </div>
-                <div class="level-right">
-                    <div class="level-item">
-                        {{ activeSchedule.start_time | time }} &ndash;
-                        {{ activeSchedule.end_time | time }}
-                    </div>
-                </div>
-            </div>
-            <div class="is-clearfix"></div>
-            <div class="columns is-mobile is-slim">
-                <div class="column"><Stage :stage="activeSchedule.stage_a"></Stage></div>
-                <div class="column"><Stage :stage="activeSchedule.stage_b"></Stage></div>
-                <template v-if="selectedRegionHasActiveSplatfest">
-                    <div class="column"><Stage :stage="selectedRegionCurrentSplatfest.special_stage"></Stage></div>
-                </template>
-            </div>
+    <div v-if="activeSchedule" class="main-schedule">
+      <div class="level is-mobile top-bar">
+        <div class="level-left">
+          <div class="level-item title-color is-size-5">
+            {{ activeRuleName }}
+          </div>
         </div>
-
-        <template v-if="upcomingSchedules && upcomingSchedules[0]">
-            <div class="is-size-5 title-squid font-splatoon1">
-                {{ $t('times.next') }}
-            </div>
-
-            <ScheduleRow :schedule="upcomingSchedules[0]" is-small />
+        <div class="level-right">
+          <div class="level-item">
+            {{ activeSchedule.start_time | time }} &ndash;
+            {{ activeSchedule.end_time | time }}
+          </div>
+        </div>
+      </div>
+      <div class="is-clearfix" />
+      <div class="columns is-mobile is-slim">
+        <div class="column">
+          <Stage :stage="activeSchedule.stage_a" />
+        </div>
+        <div class="column">
+          <Stage :stage="activeSchedule.stage_b" />
+        </div>
+        <template v-if="selectedRegionHasActiveSplatfest">
+          <div class="column">
+            <Stage :stage="selectedRegionCurrentSplatfest.special_stage" />
+          </div>
         </template>
-
-        <p class="has-text-centered" style="margin-top: 10px">
-            <router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
-                <span class="icon squid-icon-tilt">
-                    <span class="fa squid-squid"></span>
-                </span>
-                <span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
-            </router-link>
-        </p>
+      </div>
     </div>
+
+    <template v-if="upcomingSchedules && upcomingSchedules[0]">
+      <div class="is-size-5 title-squid font-splatoon1">
+        {{ $t('times.next') }}
+      </div>
+
+      <ScheduleRow :schedule="upcomingSchedules[0]" is-small />
+    </template>
+
+    <p class="has-text-centered" style="margin-top: 10px">
+      <router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
+        <span class="icon squid-icon-tilt">
+          <span class="fa squid-squid" />
+        </span>
+        <span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
+      </router-link>
+    </p>
+  </div>
 </template>
 
 <script>
@@ -73,5 +81,5 @@ export default {
             return null;
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/ScheduleDialog.vue b/src/web/components/splatoon/ScheduleDialog.vue
index 558db0f..4eca59a 100644
--- a/src/web/components/splatoon/ScheduleDialog.vue
+++ b/src/web/components/splatoon/ScheduleDialog.vue
@@ -1,14 +1,14 @@
 <template>
-    <Modal @close="$emit('close')" class="font-splatoon2">
-        <div class="modal-card schedule-box tilt-left-slight" :class="mode">
-            <header class="modal-card-head">
-                <GameModeHeader :mode="mode" />
-            </header>
-            <section class="modal-card-body">
-                <ScheduleList :mode="mode" />
-            </section>
-        </div>
-    </Modal>
+  <Modal class="font-splatoon2" @close="$emit('close')">
+    <div class="modal-card schedule-box tilt-left-slight" :class="mode">
+      <header class="modal-card-head">
+        <GameModeHeader :mode="mode" />
+      </header>
+      <section class="modal-card-body">
+        <ScheduleList :mode="mode" />
+      </section>
+    </div>
+  </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/ScheduleList.vue b/src/web/components/splatoon/ScheduleList.vue
index 8be6306..3ff71fb 100644
--- a/src/web/components/splatoon/ScheduleList.vue
+++ b/src/web/components/splatoon/ScheduleList.vue
@@ -1,35 +1,35 @@
 <template>
-    <div>
-        <div v-if="first">
-            <div class="is-size-5 title-squid font-splatoon1">
-                <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
-                <span v-else>{{ $t('times.soon') }}</span>
-            </div>
+  <div>
+    <div v-if="first">
+      <div class="is-size-5 title-squid font-splatoon1">
+        <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
+        <span v-else>{{ $t('times.soon') }}</span>
+      </div>
 
-            <ScheduleRow :schedule="first" />
-        </div>
-        <template>
-            <div v-if="second">
-                <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-                    {{ $t('times.next') }}
-                </div>
-
-                <ScheduleRow :schedule="second" />
-            </div>
-
-            <div v-if="others && others.length">
-                <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-                    {{ $t('times.future') }}
-                </div>
-
-                <ScheduleRow
-                    v-for="schedule in others"
-                    :key="schedule.start_time"
-                    :schedule="schedule"
-                    />
-            </div>
-        </template>
+      <ScheduleRow :schedule="first" />
     </div>
+    <template>
+      <div v-if="second">
+        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+          {{ $t('times.next') }}
+        </div>
+
+        <ScheduleRow :schedule="second" />
+      </div>
+
+      <div v-if="others && others.length">
+        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+          {{ $t('times.future') }}
+        </div>
+
+        <ScheduleRow
+          v-for="schedule in others"
+          :key="schedule.start_time"
+          :schedule="schedule"
+        />
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -48,5 +48,5 @@ export default {
         second() { return this.schedules && this.schedules[1]; },
         others() { return this.schedules && this.schedules.slice(2); },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/ScheduleRow.vue b/src/web/components/splatoon/ScheduleRow.vue
index b524e67..f3dfe10 100644
--- a/src/web/components/splatoon/ScheduleRow.vue
+++ b/src/web/components/splatoon/ScheduleRow.vue
@@ -1,62 +1,70 @@
 <template>
-    <div>
-        <div class="level is-mobile is-marginless is-hidden-tablet">
-            <div class="level-left">
-                <template v-if="ruleName">
-                    <div class="level-item title-color is-size-5">{{ ruleName }}</div>
-                </template>
-                <template v-else>
-                    {{ timeFromNow }}
-                </template>
-            </div>
-            <div class="level-right">
-                <div class="level-item has-text-right">
-                    <div>
-                        <template v-if="ruleName && schedule.start_time > now">
-                            {{ timeFromNow }}<span class="is-hidden-mobile">,&nbsp;</span>
-                        </template>
-                        <div class="is-size-7">
-                            <template v-if="showStartDate">
-                                {{ schedule.start_time | date }}
-                            </template>
-                            {{ schedule.start_time | time }} &ndash;
-                            <template v-if="showEndDate">
-                                {{ schedule.end_time | date }}
-                            </template>
-                            {{ schedule.end_time | time }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="columns is-slim" v-if="schedule">
-            <div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
-                <div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">{{ ruleName }}</div>
-                <div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
-                    <template v-if="schedule.start_time > now">
-                        {{ timeFromNow }}
-                        <br />
-                    </template>
-                    <template v-if="showStartDate">
-                        {{ schedule.start_time | date }}
-                    </template>
-                    <span class="nowrap">{{ schedule.start_time | time }}</span>
-                    &ndash;
-                    <template v-if="showEndDate">
-                        {{ schedule.end_time | date }}
-                    </template>
-                    <span class="nowrap">{{ schedule.end_time | time }}</span>
-                </div>
-            </div>
-            <div class="column is-8">
-                <div class="columns is-mobile is-slim">
-                    <div class="column"><Stage :stage="schedule.stage_a" v-if="schedule.stage_a" /></div>
-                    <div class="column"><Stage :stage="schedule.stage_b" v-if="schedule.stage_b" /></div>
-                </div>
+  <div>
+    <div class="level is-mobile is-marginless is-hidden-tablet">
+      <div class="level-left">
+        <template v-if="ruleName">
+          <div class="level-item title-color is-size-5">
+            {{ ruleName }}
+          </div>
+        </template>
+        <template v-else>
+          {{ timeFromNow }}
+        </template>
+      </div>
+      <div class="level-right">
+        <div class="level-item has-text-right">
+          <div>
+            <template v-if="ruleName && schedule.start_time > now">
+              {{ timeFromNow }}<span class="is-hidden-mobile">,&nbsp;</span>
+            </template>
+            <div class="is-size-7">
+              <template v-if="showStartDate">
+                {{ schedule.start_time | date }}
+              </template>
+              {{ schedule.start_time | time }} &ndash;
+              <template v-if="showEndDate">
+                {{ schedule.end_time | date }}
+              </template>
+              {{ schedule.end_time | time }}
             </div>
+          </div>
         </div>
+      </div>
     </div>
+
+    <div v-if="schedule" class="columns is-slim">
+      <div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
+        <div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">
+          {{ ruleName }}
+        </div>
+        <div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
+          <template v-if="schedule.start_time > now">
+            {{ timeFromNow }}
+            <br />
+          </template>
+          <template v-if="showStartDate">
+            {{ schedule.start_time | date }}
+          </template>
+          <span class="nowrap">{{ schedule.start_time | time }}</span>
+          &ndash;
+          <template v-if="showEndDate">
+            {{ schedule.end_time | date }}
+          </template>
+          <span class="nowrap">{{ schedule.end_time | time }}</span>
+        </div>
+      </div>
+      <div class="column is-8">
+        <div class="columns is-mobile is-slim">
+          <div class="column">
+            <Stage v-if="schedule.stage_a" :stage="schedule.stage_a" />
+          </div>
+          <div class="column">
+            <Stage v-if="schedule.stage_b" :stage="schedule.stage_b" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -90,12 +98,12 @@ export default {
                 return this.$t(`splatnet.rules.${rule.key}.name`, rule.name);
             return null;
         },
-        ruleNameClass() { return this.isSmall ? 'is-6' : 'is-5' },
-        scheduleClass() { return this.isSmall ? 'is-7' : 'is-6' },
+        ruleNameClass() { return this.isSmall ? 'is-6' : 'is-5'; },
+        scheduleClass() { return this.isSmall ? 'is-7' : 'is-6'; },
         timeFromNow() {
             let time = Vue.filter('duration')(this.schedule.start_time - this.now);
             return this.$t('time.in', { time });
         },
-    }
-}
+    },
+};
 </script>
diff --git a/src/web/components/splatoon/SplatNetGearDialog.vue b/src/web/components/splatoon/SplatNetGearDialog.vue
index c5b2a0e..5420c0a 100644
--- a/src/web/components/splatoon/SplatNetGearDialog.vue
+++ b/src/web/components/splatoon/SplatNetGearDialog.vue
@@ -1,19 +1,21 @@
 <template>
-    <Modal @close="$emit('close')">
-        <div class="modal-content">
-            <div class="splatnet-gear-dialog">
-                <h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">{{ $t('splatnet_gear.title') }}</h3>
-                <div class="columns is-marginless is-multiline is-mobile is-centered">
-                    <div class="column is-half-mobile is-one-third-tablet" v-for="(merchandise, index) in merchandises" :key="merchandise.end_time">
-                        <MerchandiseBox
-                            :merchandise="merchandise"
-                            :class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
-                            />
-                    </div>
-                </div>
-            </div>
+  <Modal @close="$emit('close')">
+    <div class="modal-content">
+      <div class="splatnet-gear-dialog">
+        <h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">
+          {{ $t('splatnet_gear.title') }}
+        </h3>
+        <div class="columns is-marginless is-multiline is-mobile is-centered">
+          <div v-for="(merchandise, index) in merchandises" :key="merchandise.end_time" class="column is-half-mobile is-one-third-tablet">
+            <MerchandiseBox
+              :merchandise="merchandise"
+              :class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
+            />
+          </div>
         </div>
-    </Modal>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestBox.vue b/src/web/components/splatoon/SplatfestBox.vue
index 7a06d03..e9c1611 100644
--- a/src/web/components/splatoon/SplatfestBox.vue
+++ b/src/web/components/splatoon/SplatfestBox.vue
@@ -1,94 +1,96 @@
 <template>
-    <div class="font-splatoon2" :class="{ 'has-results': showingResults }">
-        <div class="splatfest-header">
-            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-                {{ title }}
-            </h2>
-        </div>
-
-        <div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
-            <div class="image panel-image">
-                <img :src="image" />
-            </div>
-
-            <div class="regions">
-                <span class="region" v-for="(data, region) in festival.regions" :key="region">
-                    <span class="icon is-small">
-                        <img :src="require(`@/web/assets/img/region-${region}.svg`)" />
-                    </span>
-                    <span>{{ region | upperCase }}</span>
-
-                </span>
-            </div>
-
-            <div class="columns is-gapless labels is-hidden-mobile">
-                <div class="column" v-text="teamNames.long.alpha"></div>
-                <div class="column has-text-right" v-text="teamNames.long.bravo"></div>
-            </div>
-
-            <div class="columns is-gapless labels is-mobile is-hidden-tablet">
-                <div class="column" v-text="teamNames.short.alpha"></div>
-                <div class="column has-text-right" v-text="teamNames.short.bravo"></div>
-            </div>
-
-            <SplatfestResultsBox :festival="festival" v-if="showingResults" />
-        </div>
-
-        <div class="mobile-results is-hidden-tablet" v-if="showingResults">
-            <SplatfestResultsBox :festival="festival" />
-        </div>
-
-        <div class="has-text-centered is-size-5 title-color festival-period-container" v-if="!globalSplatfestMode">
-            <div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
-                <template v-if="!screenshotMode">
-                    <span class="nowrap">
-                        {{ festival.times.start | date(dateOptions) }}
-                        {{ festival.times.start | time }}
-                    </span>
-                    &ndash;
-                    <span class="nowrap">
-                        {{ festival.times.end | date }}
-                        {{ festival.times.end | time }}
-                    </span>
-                </template>
-                <template v-else>
-                    <template v-if="festival.state == 'upcoming'">
-                        <template v-if="festival.times.start - now > 24 * 60 * 60">
-                            {{ festival.times.start - now | shortDuration | time.in }}
-                        </template>
-                        <template v-else>
-                            {{ festival.times.start - now | durationHours | time.in }}
-                        </template>
-                    </template>
-                    <template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
-                        {{ festival.times.result - now | durationHours | resultsIn }}
-                    </template>
-                    <template v-else>
-                        {{ festival.times.end - now | durationHours | time.remaining }}
-                    </template>
-                </template>
-            </div>
-
-            <SplatfestWinnerBar :festival="festival" v-else />
-        </div>
-
-        <div class="splatfest-content has-text-centered" v-if="!screenshotMode && !globalSplatfestMode">
-            <template v-if="festival.state == 'upcoming'">
-                {{ festival.times.start - now | duration | time.in }}
-            </template>
-
-            <template v-else-if="festival.state == 'active'">
-                {{ festival.times.end - now | duration | time.remaining }}
-            </template>
-
-            <template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
-                {{ festival.times.result - now | duration | resultsIn }}
-            </template>
-        </div>
-
-        <!-- Spacer at the bottom -->
-        <div v-if="globalSplatfestMode">&nbsp;</div>
+  <div class="font-splatoon2" :class="{ 'has-results': showingResults }">
+    <div class="splatfest-header">
+      <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+        {{ title }}
+      </h2>
     </div>
+
+    <div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
+      <div class="image panel-image">
+        <img :src="image" />
+      </div>
+
+      <div class="regions">
+        <span v-for="(data, region) in festival.regions" :key="region" class="region">
+          <span class="icon is-small">
+            <img :src="require(`@/web/assets/img/region-${region}.svg`)" />
+          </span>
+          <span>{{ region | upperCase }}</span>
+
+        </span>
+      </div>
+
+      <div class="columns is-gapless labels is-hidden-mobile">
+        <div class="column" v-text="teamNames.long.alpha" />
+        <div class="column has-text-right" v-text="teamNames.long.bravo" />
+      </div>
+
+      <div class="columns is-gapless labels is-mobile is-hidden-tablet">
+        <div class="column" v-text="teamNames.short.alpha" />
+        <div class="column has-text-right" v-text="teamNames.short.bravo" />
+      </div>
+
+      <SplatfestResultsBox v-if="showingResults" :festival="festival" />
+    </div>
+
+    <div v-if="showingResults" class="mobile-results is-hidden-tablet">
+      <SplatfestResultsBox :festival="festival" />
+    </div>
+
+    <div v-if="!globalSplatfestMode" class="has-text-centered is-size-5 title-color festival-period-container">
+      <div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
+        <template v-if="!screenshotMode">
+          <span class="nowrap">
+            {{ festival.times.start | date(dateOptions) }}
+            {{ festival.times.start | time }}
+          </span>
+          &ndash;
+          <span class="nowrap">
+            {{ festival.times.end | date }}
+            {{ festival.times.end | time }}
+          </span>
+        </template>
+        <template v-else>
+          <template v-if="festival.state == 'upcoming'">
+            <template v-if="festival.times.start - now > 24 * 60 * 60">
+              {{ festival.times.start - now | shortDuration | time.in }}
+            </template>
+            <template v-else>
+              {{ festival.times.start - now | durationHours | time.in }}
+            </template>
+          </template>
+          <template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
+            {{ festival.times.result - now | durationHours | resultsIn }}
+          </template>
+          <template v-else>
+            {{ festival.times.end - now | durationHours | time.remaining }}
+          </template>
+        </template>
+      </div>
+
+      <SplatfestWinnerBar v-else :festival="festival" />
+    </div>
+
+    <div v-if="!screenshotMode && !globalSplatfestMode" class="splatfest-content has-text-centered">
+      <template v-if="festival.state == 'upcoming'">
+        {{ festival.times.start - now | duration | time.in }}
+      </template>
+
+      <template v-else-if="festival.state == 'active'">
+        {{ festival.times.end - now | duration | time.remaining }}
+      </template>
+
+      <template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
+        {{ festival.times.result - now | duration | resultsIn }}
+      </template>
+    </div>
+
+    <!-- Spacer at the bottom -->
+    <div v-if="globalSplatfestMode">
+&nbsp;
+    </div>
+  </div>
 </template>
 
 <script>
@@ -99,17 +101,17 @@ import SplatfestWinnerBar from './SplatfestWinnerBar.vue';
 
 export default {
     components: { SplatfestResultsBox, SplatfestWinnerBar },
+    filters: {
+        resultsIn(time) {
+            return Vue.i18n.translate('splatfest.results_in', { time });
+        },
+    },
     props: {
         festival: null,
         screenshotMode: Boolean,
         historyMode: Boolean,
         globalSplatfestMode: Boolean,
     },
-    filters: {
-        resultsIn(time) {
-            return Vue.i18n.translate('splatfest.results_in', { time });
-        },
-    },
     computed: {
         ...mapGetters('splatoon', ['now']),
         showingResults() {
@@ -150,5 +152,5 @@ export default {
             };
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/SplatfestHistoryDialog.vue b/src/web/components/splatoon/SplatfestHistoryDialog.vue
index 7f3bcb9..0ae2e9c 100644
--- a/src/web/components/splatoon/SplatfestHistoryDialog.vue
+++ b/src/web/components/splatoon/SplatfestHistoryDialog.vue
@@ -1,76 +1,84 @@
 <template>
-    <Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="festivals">
-        <div class="modal-card">
-            <div class="modal-card-head">
-                <div class="level">
-                    <div class="level-left">
-                        <h3 class="title is-3 font-splatoon1 text-shadow">{{ $t('splatfest.previous') }}</h3>
-                    </div>
+  <Modal v-if="festivals" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
+    <div class="modal-card">
+      <div class="modal-card-head">
+        <div class="level">
+          <div class="level-left">
+            <h3 class="title is-3 font-splatoon1 text-shadow">
+              {{ $t('splatfest.previous') }}
+            </h3>
+          </div>
 
-                    <div class="level-right">
-                        <DropdownBase
-                            :label="selectedRegion.name"
-                            style="margin: 0 -12px"
-                            class="font-splatoon2 is-right-tablet"
-                            trigger-class="button is-clear font-splatoon2"
-                            >
-                            <router-link v-for="region in regions" class="dropdown-item" :key="region.key" :to="region.route" exact>
-                                {{ region.name }}
-                            </router-link>
-                        </DropdownBase>
-                    </div>
-                </div>
-            </div>
-
-            <div class="modal-card-body" ref="body">
-                <div class="columns idol-results" v-if="!region">
-                    <div class="column has-text-right is-hidden-mobile has-idol">
-                        <img src="~@/web/assets/img/pearl.png" width="173" height="290" />
-                    </div>
-                    <div class="column is-5">
-                        <div class="is-hidden-mobile" style="height: 85px"></div>
-                        <div class="idol-results-container">
-                            <IdolResultsBox />
-                        </div>
-                    </div>
-                    <div class="column has-text-left is-hidden-mobile has-idol">
-                        <img src="~@/web/assets/img/marina.png" width="172" height="339" />
-                    </div>
-                </div>
-
-                <div v-for="(festival, index) in festivals" class="splatfest-history-row" :key="festival.festival_id">
-                    <div class="level">
-                        <div class="level-item">
-                            <div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
-                                <div class="hook-box">
-                                    <SplatfestBox :festival="festival" history-mode show-regions />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="level-item">
-                            <div class="splatfest-results-container">
-                                <SplatfestResultsBox
-                                    v-if="festival.results"
-                                    :festival="festival"
-                                    :results="festival.results"
-                                    history-mode
-                                    />
-
-                                <div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
-                                    <div>{{ festival.times.result - now | duration | resultsIn }}</div>
-                                    <div>
-                                        {{ festival.times.result | date }}
-                                        {{ festival.times.result | time }}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+          <div class="level-right">
+            <DropdownBase
+              :label="selectedRegion.name"
+              style="margin: 0 -12px"
+              class="font-splatoon2 is-right-tablet"
+              trigger-class="button is-clear font-splatoon2"
+            >
+              <router-link
+                v-for="region in regions"
+                :key="region.key"
+                class="dropdown-item"
+                :to="region.route"
+                exact
+              >
+                {{ region.name }}
+              </router-link>
+            </DropdownBase>
+          </div>
         </div>
-    </Modal>
+      </div>
+
+      <div ref="body" class="modal-card-body">
+        <div v-if="!region" class="columns idol-results">
+          <div class="column has-text-right is-hidden-mobile has-idol">
+            <img src="~@/web/assets/img/pearl.png" width="173" height="290" />
+          </div>
+          <div class="column is-5">
+            <div class="is-hidden-mobile" style="height: 85px" />
+            <div class="idol-results-container">
+              <IdolResultsBox />
+            </div>
+          </div>
+          <div class="column has-text-left is-hidden-mobile has-idol">
+            <img src="~@/web/assets/img/marina.png" width="172" height="339" />
+          </div>
+        </div>
+
+        <div v-for="(festival, index) in festivals" :key="festival.festival_id" class="splatfest-history-row">
+          <div class="level">
+            <div class="level-item">
+              <div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
+                <div class="hook-box">
+                  <SplatfestBox :festival="festival" history-mode show-regions />
+                </div>
+              </div>
+            </div>
+
+            <div class="level-item">
+              <div class="splatfest-results-container">
+                <SplatfestResultsBox
+                  v-if="festival.results"
+                  :festival="festival"
+                  :results="festival.results"
+                  history-mode
+                />
+
+                <div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
+                  <div>{{ festival.times.result - now | duration | resultsIn }}</div>
+                  <div>
+                    {{ festival.times.result | date }}
+                    {{ festival.times.result | time }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestResultsBox.vue b/src/web/components/splatoon/SplatfestResultsBox.vue
index edd1b8a..dce06e5 100644
--- a/src/web/components/splatoon/SplatfestResultsBox.vue
+++ b/src/web/components/splatoon/SplatfestResultsBox.vue
@@ -1,44 +1,44 @@
 <template>
-    <div class="splatfest-results">
-        <div class="background"></div>
+  <div class="splatfest-results">
+    <div class="background" />
 
-        <div class="columns is-marginless is-gapless is-mobile results-header">
-            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
-                {{ $t('splatfest.results.title') }}
-            </div>
+    <div class="columns is-marginless is-gapless is-mobile results-header">
+      <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
+        {{ $t('splatfest.results.title') }}
+      </div>
 
-            <div class="column">
-                <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
-                    <img :src="festival.images.alpha | localSplatNetImageUrl" />
-                </div>
-            </div>
-
-            <div class="column is-3">
-                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
-            </div>
-
-            <div class="column">
-                <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
-                    <img :src="festival.images.bravo | localSplatNetImageUrl" />
-                </div>
-            </div>
+      <div class="column">
+        <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
+          <img :src="festival.images.alpha | localSplatNetImageUrl" />
         </div>
+      </div>
 
-        <SplatfestResultsRow :festival="festival" type="vote" />
+      <div class="column is-3">
+        <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
+      </div>
 
-        <template v-if="!isResultsV4">
-            <SplatfestResultsRow :festival="festival" type="solo" />
-            <SplatfestResultsRow :festival="festival" type="team" />
-        </template>
-        <template v-else>
-            <SplatfestResultsRow :festival="festival" type="regular" />
-            <SplatfestResultsRow :festival="festival" type="challenge" />
-        </template>
-
-        <div class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;" v-if="historyMode">
-            <SplatfestWinnerBar :festival="festival" />
+      <div class="column">
+        <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
+          <img :src="festival.images.bravo | localSplatNetImageUrl" />
         </div>
+      </div>
     </div>
+
+    <SplatfestResultsRow :festival="festival" type="vote" />
+
+    <template v-if="!isResultsV4">
+      <SplatfestResultsRow :festival="festival" type="solo" />
+      <SplatfestResultsRow :festival="festival" type="team" />
+    </template>
+    <template v-else>
+      <SplatfestResultsRow :festival="festival" type="regular" />
+      <SplatfestResultsRow :festival="festival" type="challenge" />
+    </template>
+
+    <div v-if="historyMode" class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;">
+      <SplatfestWinnerBar :festival="festival" />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestResultsRow.vue b/src/web/components/splatoon/SplatfestResultsRow.vue
index 14fc667..d99b6e1 100644
--- a/src/web/components/splatoon/SplatfestResultsRow.vue
+++ b/src/web/components/splatoon/SplatfestResultsRow.vue
@@ -1,41 +1,49 @@
 <template>
-    <div class="columns is-mobile result">
-        <div class="column">
-            <div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
-            <div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
-            <div class="result-container">
-                <div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
-                    <div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
-                </div>
-                <div class="font-splatoon2 title is-7" v-if="showAverage">
-                    {{ $t('splatfest.results.average') }}
-                    {{ averages.alpha | numberFormat(0) }}
-                </div>
-            </div>
+  <div class="columns is-mobile result">
+    <div class="column">
+      <div v-if="winner == 'alpha'" class="winner-mark-shadow" />
+      <div v-if="winner == 'alpha'" class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" />
+      <div class="result-container">
+        <div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
+          <div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
         </div>
-
-        <div class="column is-3 has-text-centered font-splatoon2">
-            {{ $t(`splatfest.results.${type}`) }}
-        </div>
-
-        <div class="column">
-            <div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
-            <div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
-            <div class="result-container">
-                <div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
-                    <div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
-                </div>
-                <div class="font-splatoon2 title is-7" v-if="showAverage">
-                    {{ $t('splatfest.results.average') }}
-                    {{ averages.bravo | numberFormat(0) }}
-                </div>
-            </div>
+        <div v-if="showAverage" class="font-splatoon2 title is-7">
+          {{ $t('splatfest.results.average') }}
+          {{ averages.alpha | numberFormat(0) }}
         </div>
+      </div>
     </div>
+
+    <div class="column is-3 has-text-centered font-splatoon2">
+      {{ $t(`splatfest.results.${type}`) }}
+    </div>
+
+    <div class="column">
+      <div v-if="winner == 'bravo'" class="winner-mark-shadow" />
+      <div v-if="winner == 'bravo'" class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" />
+      <div class="result-container">
+        <div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
+          <div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
+        </div>
+        <div v-if="showAverage" class="font-splatoon2 title is-7">
+          {{ $t('splatfest.results.average') }}
+          {{ averages.bravo | numberFormat(0) }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
+    filters: {
+        wholePercent(value) {
+            return value.toString().slice(0, -2);
+        },
+        partialPercent(value) {
+            return value.toString().slice(-2);
+        },
+    },
     props: ['festival', 'type'],
     computed: {
         winner() {
@@ -63,14 +71,6 @@ export default {
             return ['regular', 'challenge'].indexOf(this.type) !== -1;
         },
     },
-    filters: {
-        wholePercent(value) {
-            return value.toString().slice(0, -2);
-        },
-        partialPercent(value) {
-            return value.toString().slice(-2);
-        },
-    },
     methods: {
         resultTitle(team) {
             if (this.type == 'vote')
@@ -78,5 +78,5 @@ export default {
             return this.festival.results.team_scores && this.festival.results.team_scores[`${team}_${this.type}`];
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/SplatfestWinnerBar.vue b/src/web/components/splatoon/SplatfestWinnerBar.vue
index d23328f..7249380 100644
--- a/src/web/components/splatoon/SplatfestWinnerBar.vue
+++ b/src/web/components/splatoon/SplatfestWinnerBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="festival-period" style="background-color: #333" v-html="teamWins"></div>
+  <div class="festival-period" style="background-color: #333" v-html="teamWins" />
 </template>
 
 <script>
@@ -22,5 +22,5 @@ export default {
             return this.$t('splatfest.team_name_wins', { team });
         },
     },
-}
+};
 </script>
diff --git a/src/web/components/splatoon/Stage.vue b/src/web/components/splatoon/Stage.vue
index 01c5709..3115822 100644
--- a/src/web/components/splatoon/Stage.vue
+++ b/src/web/components/splatoon/Stage.vue
@@ -1,21 +1,27 @@
 <template>
-    <div class="stage-image" :class="{ hand: clickable }" :style="style" @click="click" v-if="stageDetails">
-        <figure class="image is-16by9"></figure>
-        <span class="stage-title" v-if="showTitle">{{ name }}</span>
+  <div
+    v-if="stageDetails"
+    class="stage-image"
+    :class="{ hand: clickable }"
+    :style="style"
+    @click="click"
+  >
+    <figure class="image is-16by9" />
+    <span v-if="showTitle" class="stage-title">{{ name }}</span>
 
-        <Modal v-if="isOpen" @close="isOpen = false" class="is-xwide">
-            <div class="modal-content tilt-right-slight">
-                <p class="image is-16by9" @click="isOpen = false">
-                    <img :src="largeImage" />
-                </p>
-                <p class="has-text-centered">
-                    <span class="font-splatoon2">
-                        {{ name }}
-                    </span>
-                </p>
-            </div>
-        </Modal>
-    </div>
+    <Modal v-if="isOpen" class="is-xwide" @close="isOpen = false">
+      <div class="modal-content tilt-right-slight">
+        <p class="image is-16by9" @click="isOpen = false">
+          <img :src="largeImage" />
+        </p>
+        <p class="has-text-centered">
+          <span class="font-splatoon2">
+            {{ name }}
+          </span>
+        </p>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script>
@@ -72,5 +78,5 @@ export default {
                 this.isOpen = true;
         },
     },
-}
+};
 </script>
diff --git a/src/web/store/splatoon/finalFest.js b/src/web/store/splatoon/finalFest.js
index 5929703..58764df 100644
--- a/src/web/store/splatoon/finalFest.js
+++ b/src/web/store/splatoon/finalFest.js
@@ -25,14 +25,14 @@ for (const schedule of finalFest) {
 
 export const state = {
   schedules,
-}
+};
 
 export const getters = {
   schedules(state) {
     return state.schedules;
   },
   currentSchedules(state, getters, { splatoon }) {
-    let now = splatoon.now
+    let now = splatoon.now;
     let schedules = state.schedules;
 
     if (now && schedules)
@@ -44,4 +44,4 @@ export const getters = {
     if (now && getters.currentSchedules)
       return getters.currentSchedules.find(s => s.start_time <= now);
   },
-}
+};
diff --git a/src/web/store/splatoon/schedules.js b/src/web/store/splatoon/schedules.js
index 927fb19..9a684e0 100644
--- a/src/web/store/splatoon/schedules.js
+++ b/src/web/store/splatoon/schedules.js
@@ -6,7 +6,7 @@ function generateModule(name, source) {
         getters: {
             // All current schedules (active & future)
             currentSchedules(state, getters, { splatoon }) {
-                let now = splatoon.now
+                let now = splatoon.now;
                 let schedules = splatoon.data.schedules;
 
                 if (now && schedules)
diff --git a/src/web/store/splatoon/splatfests.js b/src/web/store/splatoon/splatfests.js
index 3c0c404..0b3a442 100644
--- a/src/web/store/splatoon/splatfests.js
+++ b/src/web/store/splatoon/splatfests.js
@@ -55,7 +55,7 @@ export const getters = {
             || rootGetters['splatoon/splatfests/jp/currentSplatfest'];
     },
     selectedRegionCurrentSplatfest(state, getters, rootState, rootGetters) {
-        let region = rootGetters[`splatoon/regions/selectedRegion`];
+        let region = rootGetters['splatoon/regions/selectedRegion'];
         if (region)
             return rootGetters[`splatoon/splatfests/${region.key}/currentSplatfest`];
     },
@@ -90,7 +90,7 @@ function generateModule(region) {
                     return {
                         alpha: getters.allSplatfests.reduce((sum, festival) => sum + ((festival.results && festival.results.summary.total === 0) ? 1 : 0), 0),
                         bravo: getters.allSplatfests.reduce((sum, festival) => sum + ((festival.results && festival.results.summary.total === 1) ? 1 : 0), 0),
-                    }
+                    };
                 }
             },
         },
@@ -101,4 +101,4 @@ export const modules = {
     na: generateModule('na'),
     eu: generateModule('eu'),
     jp: generateModule('jp'),
-}
+};
diff --git a/src/web/support/directives.js b/src/web/support/directives.js
index a677c4f..c7800fc 100644
--- a/src/web/support/directives.js
+++ b/src/web/support/directives.js
@@ -12,5 +12,5 @@ Vue.use(VueClipboard);
 Vue.directive('portal', {
     inserted(el) {
         document.body.appendChild(el);
-    }
+    },
 });
diff --git a/src/web/support/stages.js b/src/web/support/stages.js
index cc13558..daa4f67 100644
--- a/src/web/support/stages.js
+++ b/src/web/support/stages.js
@@ -47,4 +47,4 @@ export default [
         image: '/images/stage/96fd8c0492331a30e60a217c94fd1d4c73a966cc.png',
         largeImage: require('@/web/assets/img/stages/turf-wars-stage-8_2x.jpg'),
     },
-]
+];