de day #74

frontend/src/pages/TablesPage.tsx

@@ -141,15 +141,22 @@ const TablesPage: React.FC = () => {
         )}
 
         {!!competitions.length && (
-          <Tabs variant="enclosed">
-            <TabList>
+          <Tabs variant="enclosed" 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: 'var(--chakra-colors-gray-300)', borderRadius: '4px' },
+            }}>
               {competitions.map((c) => (
                 <Tab
                   key={c.id}
                   _selected={{ bg: 'brand.primary', color: 'text.onPrimary', borderColor: 'brand.primary' }}
                   _hover={{ bg: 'rgba(0,0,0,0.04)' }}
+                  flex="0 0 auto"
+                  px={3}
+                  py={2}
                 >
-                  {c.name}
+                  <Text as="span" noOfLines={1} maxW="300px" title={c.name}>{c.name}</Text>
                 </Tab>
               ))}
             </TabList>