Scroll tab list on record show (#3561)

* scroll tab list on record show #3275

* update the style of tab

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -20,10 +20,9 @@ const StyledInnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  width: ${({ theme }) =>
-    useIsMobile() ? `calc(100% - ${theme.spacing(5)})` : '348px'};
+  padding: ${({ theme }) => (useIsMobile() ? '12px 0' : theme.spacing(3))};
+  padding-right: ${({ theme }) => (useIsMobile() ? 0 : theme.spacing(2))};
+  width: ${() => (useIsMobile() ? `100%` : '348px')};
 `;
 
 const StyledIntermediateContainer = styled.div`

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -30,7 +30,7 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
-  margin-bottom: -1px;
+  margin-bottom: 0;
   padding: ${({ theme }) => theme.spacing(2) + ' 0'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
 `;

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -29,6 +29,7 @@ const StyledContainer = styled.div`
   height: 40px;
   padding-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
+  overflow: auto;
 `;
 
 export const TabList = ({ tabs, tabListId }: TabListProps) => {