fix stats table

src/components/swipeable-tabs.tsx

@@ -207,11 +207,13 @@ function SwipeableTabs({
           height: carouselHeight === "auto" ? "auto" : `${carouselHeight}px`,
           transition: "height 300ms ease",
           touchAction: "pan-y",
+          width: "100%",
+          maxWidth: "100vw",
         }}
       >
         {tabs.map((tab, index) => (
           <Carousel.Slide key={`${tab.label}-content-${index}`}>
-            <Box ref={setSlideRef(index)} style={{ height: "auto" }}>
+            <Box ref={setSlideRef(index)} style={{ height: "auto", width: "100%", maxWidth: "100vw", overflow: "hidden" }}>
               {tab.content}
             </Box>
           </Carousel.Slide>

src/features/players/components/player-stats-table.tsx

@@ -6,7 +6,6 @@ import {
   Group,
   Box,
   ThemeIcon,
-  Container,
   Title,
   Divider,
   UnstyledButton,
@@ -292,7 +291,7 @@ const PlayerStatsTable = () => {
 
   if (playerStats.length === 0) {
     return (
-      <Container px={0} size="md">
+      <Box px={0} w="100%" maw="100%">
         <Stack align="center" gap="md" py="xl">
           <ThemeIcon size="xl" variant="light" radius="md">
             <ChartBarIcon size={32} />
@@ -301,12 +300,12 @@ const PlayerStatsTable = () => {
             No Stats Available
           </Title>
         </Stack>
-      </Container>
+      </Box>
     );
   }
 
   return (
-    <Container size="100%" px={0} mt="md">
+    <Box px={0} mt="md" w="100%" maw="100%">
       <Stack gap="xs">
         <Text px="md" size="10px" lh={0} c="dimmed">
           Showing {filteredAndSortedStats.length} of {playerStats.length} players
@@ -451,7 +450,7 @@ const PlayerStatsTable = () => {
           </Text>
         )}
       </Stack>
-    </Container>
+    </Box>
   );
 };