on smallest screens stacked Team logo and name vertically

LetsGetTechnical · Oct 11, 2024 · 1e66c56 · 1e66c56
1 parent 83271df
commit 1e66c56
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -48,15 +48,20 @@ 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}
             width={48}
             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
@@ -88,6 +88,9 @@ module.exports = {
       gridTemplateRows: {
         'adminLayout': '5rem auto',
       },
+      screens: {
+        'xs': '400px'
+      }
     },
   },
   plugins: [require('tailwindcss-animate')],