From e424bdeb2d9d2f9e306c84ca82486f710c744136 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Mon, 13 Feb 2023 21:18:15 -0800
Subject: [PATCH] Tweak reactive layout for Splatfest results

---
 src/components/SplatfestResultsBox.vue | 11 ++++++-----
 src/views/HomeView.vue                 |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/SplatfestResultsBox.vue b/src/components/SplatfestResultsBox.vue
index 03d4782..745fee9 100644
--- a/src/components/SplatfestResultsBox.vue
+++ b/src/components/SplatfestResultsBox.vue
@@ -6,22 +6,23 @@
       </div>
 
       <div class="mx-2 px-1 bg-zinc-700 bg-opacity-50 backdrop-blur-sm rounded-lg">
-        <div class="flex justify-end py-2">
+        <div class="flex justify-center py-2">
+          <div class="w-36 sm:mx-2"></div>
           <template v-for="team in festival.teams" :key="team.id">
-            <div class="w-20 mx-2 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
+            <div class="w-16 sm:w-20 mx-2 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
               <img :src="team.image.url" class="w-6 h-6" />
             </div>
           </template>
         </div>
 
         <template v-for="row in resultRows" :key="row.title">
-          <div class="flex font-splatoon2 text-shadow text-center py-1 items-center">
-            <div class="w-36 mx-2">
+          <div class="flex justify-center font-splatoon2 text-shadow text-center py-1 items-center">
+            <div class="w-36 sm:mx-2">
               {{ $t(row.title) }}
             </div>
 
             <div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
-              <div class="w-20 mx-2" v-for="(result, i) in row.results" :key="i">
+              <div class="w-20 sm:mx-2" v-for="(result, i) in row.results" :key="i">
                 <div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
                   {{ (result.ratio * 100).toFixed(2) }}%
                 </div>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 81f04e4..560764d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -34,7 +34,7 @@
           <SplatfestResultsBox
             v-if="usSplatfests.recentFestival.hasResults"
             :festival="usSplatfests.recentFestival"
-            class="max-w-sm md:max-w-md md:rotate-1"
+            class="w-full sm:max-w-md md:rotate-1"
             />
         </div>
       </div>