Fix builders carousel and UI

charmverse · Dec 5, 2024 · b6850fd · b6850fd
1 parent 35b18e3
commit b6850fd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx b/packages/scoutgame-ui/src/components/scout/StarterPackCarousel/StarterPackCarousel.tsx
@@ -22,7 +22,7 @@ export function StarterPackCarousel({
       <Carousel
         slidesPerView={1}
         autoplay={false}
-        boxProps={{ width: { xs: '100%', md: '80%' }, margin: '0 auto' }}
+        boxProps={{ width: { xs: '100%', md: '90%' }, margin: '0 auto' }}
         navigation={{
           nextEl: '.swiper-starter-pack-button-next',
           prevEl: '.swiper-starter-pack-button-prev'

diff --git a/packages/scoutgame-ui/src/components/scout/TodaysHotBuildersCarousel/BuildersCarousel.tsx b/packages/scoutgame-ui/src/components/scout/TodaysHotBuildersCarousel/BuildersCarousel.tsx
@@ -80,5 +80,9 @@ export function BuildersCarousel({
         <BuilderCard size={size} key={builder.id} builder={builder} showPurchaseButton showHotIcon />
       ));
 
-  return <Carousel slidesPerView={slidesPerView}>{builderCards}</Carousel>;
+  return (
+    <Carousel slidesPerView={slidesPerView} boxProps={{ width: { xs: '100%', md: '90%' }, margin: '0 auto' }}>
+      {builderCards}
+    </Carousel>
+  );
 }
diff --git a/...scoutgame-ui/src/components/scout/TodaysHotBuildersCarousel/TodaysHotBuildersCarousel.tsx b/...scoutgame-ui/src/components/scout/TodaysHotBuildersCarousel/TodaysHotBuildersCarousel.tsx
@@ -1,5 +1,6 @@
 import 'server-only';
 
+import { Box } from '@mui/material';
 import { getTodaysHotBuilders } from '@packages/scoutgame/builders/getTodaysHotBuilders';
 import { safeAwaitSSRData } from '@packages/scoutgame/utils/async';
 
@@ -13,5 +14,9 @@ export async function TodaysHotBuildersCarousel({ showPromoCards = false }: { sh
     return <ErrorSSRMessage />;
   }
 
-  return <BuildersCarousel builders={builders} showPromoCards={showPromoCards} />;
+  return (
+    <Box>
+      <BuildersCarousel builders={builders} showPromoCards={showPromoCards} />
+    </Box>
+  );
 }