fix: smaller quick action buttons on smaller screens

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>