From 879d9a1d27161b9d46367d80e6e204e1c1a94a66 Mon Sep 17 00:00:00 2001
From: dragoni7 <sdgibson18@outlook.com>
Date: Sun, 15 Sep 2024 20:53:24 -0700
Subject: [PATCH] Change stats table to have responsive sizing

---
 src/features/armor-optimization/StatsTable.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/armor-optimization/StatsTable.tsx b/src/features/armor-optimization/StatsTable.tsx
index e22dbd1..cdd9b74 100644
--- a/src/features/armor-optimization/StatsTable.tsx
+++ b/src/features/armor-optimization/StatsTable.tsx
@@ -41,7 +41,7 @@ const CardContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   height: '100%',
-  width: '440px',
+  width: '70%',
   padding: theme.spacing(0, 1),
 }));
 
@@ -226,20 +226,20 @@ const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClic
               await onPermutationClick(perm);
             }}
           >
-            <ArmorRow container spacing={1}>
+            <ArmorRow container spacing={0}>
               {perm.permutation.map((item, idx) => (
-                <Grid item key={idx}>
+                <Grid item md={2} key={idx}>
                   <Tooltip title={`${item.name}\n${formatArmorStats(item)}`}>
                     <Box>
-                      <ArmorIcon armor={item} size={64} />
+                      <ArmorIcon armor={item} />
                     </Box>
                   </Tooltip>
                 </Grid>
               ))}
             </ArmorRow>
-            <StatsRow container spacing={1}>
+            <StatsRow container spacing={1} alignItems="center" justifyContent="center">
               {(STATS as StatName[]).map((stat) => (
-                <Grid item key={stat}>
+                <Grid item md={1} key={stat}>
                   <StatContainer>
                     <StatIcon src={statIcons[stat]} alt={stat} />
                     <StatValue variant="body2">{calculateTotal(perm, stat)}</StatValue>
@@ -250,7 +250,7 @@ const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClic
             <ModsRow container spacing={1}>
               {(STATS as StatName[]).map((stat) =>
                 perm.modsArray[stat].map((mod, idx) => (
-                  <Grid item key={`${stat}-${idx}`}>
+                  <Grid item md={1} key={`${stat}-${idx}`}>
                     <ModIcon
                       src={modIcons[stat.toLowerCase() + '_mod'] || ''}
                       alt={mod.toString()}