de day #74

frontend/src/components/home/CompetitionMatches.tsx

@@ -139,11 +139,19 @@ const CompetitionMatches: React.FC = () => {
 
   return (
     <Box>
-      <Tabs variant="soft-rounded" colorScheme="blue" isFitted>
-        <TabList>
+      <Tabs variant="soft-rounded" colorScheme="blue" size="sm">
+        <TabList px={2} pt={2} overflowX="auto" overflowY="hidden" css={{
+          '&::-webkit-scrollbar': { height: '4px' },
+          '&::-webkit-scrollbar-track': { background: 'transparent' },
+          '&::-webkit-scrollbar-thumb': { background: 'gray.300', borderRadius: '4px' },
+        }}>
           {sortedCompetitions.map((c) => {
             const label = c.alias || c.name;
-            return <Tab key={c.id}>{label}</Tab>;
+            return (
+              <Tab key={c.id} flex="0 0 auto" px={3} py={2} fontSize="sm">
+                <Text as="span" noOfLines={1} maxW="220px" title={label}>{label}</Text>
+              </Tab>
+            );
           })}
         </TabList>
         <TabPanels>