adjusting min-width of artist name chips so they all look consistentl…

…y wide regardless how wide or thin the letter is
taver-ca · May 11, 2024 · 843b429 · 843b429
1 parent cada9e4
commit 843b429
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/ArtistsCarrousel.js b/src/ArtistsCarrousel.js
@@ -55,15 +55,15 @@ function SwipeableTextMobileStepper({ groupedNames, handleArtistClick }) {
             placement="right-start"
             open={toltipOpen === letter}
           >
-            <Chip key={letter + "chip"} sx={{ background: "limegreen" }} label={letter} color="success" onClick={() => handleLetterClick(letter)} />
+            <Chip key={letter + "chip"} sx={{ background: "limegreen", minWidth: "32px" }} label={letter} color="success" onClick={() => handleLetterClick(letter)} />
           </Tooltip>
         )}
       </Stack>
     );
   });
 
   return (
-    <Stack spacing={2} direction={'row'} useFlexGap flexWrap="wrap"  sx={{ padding:"10px", justifyContent:"center"}}>
+    <Stack spacing={2} direction={'row'} useFlexGap flexWrap="wrap" sx={{ padding: "10px", justifyContent: "center" }}>
       {artistChipsByChunks}
     </Stack>
   );