From 1e66c56f8563684550b1105062ab72ddb02b746a Mon Sep 17 00:00:00 2001
From: Cody Epstein <codyepstein@gmail.com>
Date: Thu, 10 Oct 2024 23:15:01 -0700
Subject: [PATCH] on smallest screens stacked Team logo and name vertically

---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 9 +++++++--
 tailwind.config.js                               | 3 +++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index cdc362bb..d5d025ab 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -48,7 +48,12 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
           data-testid="team-radio"
         />
 
-        <Label htmlFor={team} data-testid="team-label" disabled={isDisabled}>
+        <Label
+          htmlFor={team}
+          data-testid="team-label"
+          disabled={isDisabled}
+          className="flex-col xs:flex-row"
+        >
           <Image
             src={src}
             alt={team}
@@ -56,7 +61,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
             height={48}
             priority
             data-testid="team-image"
-            className="h-6 w-6 sm:h-12 sm:w-12"
+            className="h-12 w-12"
           />
           {loadingTeamName === selectedTeam ? <LoadingSpinner /> : <>{team}</>}
         </Label>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3d6cef2c..fc5a54b3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -88,6 +88,9 @@ module.exports = {
       gridTemplateRows: {
         'adminLayout': '5rem auto',
       },
+      screens: {
+        'xs': '400px'
+      }
     },
   },
   plugins: [require('tailwindcss-animate')],