From d679641c9d04a7b71cafacbc3794b369ab1038c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:45:44 -0500
Subject: [PATCH] fix: smaller quick action buttons on smaller screens

---
 .../components/Model/components/Options.tsx   | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index 14a8d0a9c..cfb1b7a55 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -93,7 +93,10 @@ export function Options() {
                 color={thisShell.id === antagonistShell.id ? undefined : 'gray'}
                 variant="soft"
                 key={thisShell.id}
-                size="3"
+                size={{
+                  initial: '2',
+                  sm: '3',
+                }}
                 style={{
                   borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
                   borderTopRightRadius: shellIndex === 0 ? undefined : 0,
@@ -118,9 +121,11 @@ export function Options() {
               >
                 <img
                   alt={thisShell.name}
-                  width={20}
-                  height={20}
                   src={asset(`icons/shells/${thisShell.icon}.webp`)}
+                  style={{
+                    width: '50%',
+                    height: '50%',
+                  }}
                 />
               </IconButton>
             ))}
@@ -134,7 +139,10 @@ export function Options() {
                 borderBottomRightRadius: 0,
                 borderBottomLeftRadius: 0,
               }}
-              size="3"
+              size={{
+                initial: '2',
+                sm: '3',
+              }}
               onClick={() => {
                 mutateDuel((draft) => {
                   draft.antagonist!.equipmentMatrix[0][0] = hasCalibratedShells
@@ -148,15 +156,20 @@ export function Options() {
             >
               <img
                 alt="Calibrated Shells"
-                width={20}
-                height={20}
                 src={asset('icons/equipment/103.webp')}
+                style={{
+                  width: '50%',
+                  height: '50%',
+                }}
               />
             </IconButton>
             <IconButton
               color={hasEnhancedArmor ? undefined : 'gray'}
               variant="soft"
-              size="3"
+              size={{
+                initial: '2',
+                sm: '3',
+              }}
               style={{
                 borderTopRightRadius: 0,
                 borderTopLeftRadius: 0,
@@ -175,9 +188,11 @@ export function Options() {
             >
               <img
                 alt="Enhanced Armor"
-                width={20}
-                height={20}
                 src={asset('icons/equipment/110.webp')}
+                style={{
+                  width: '50%',
+                  height: '50%',
+                }}
               />
             </IconButton>
           </Flex>