Tablist regression fix (#10832)

## Issue
https://discord.com/channels/1130383047699738754/1349428521075871846
@Devessier found a regression where the TabList was getting too tall in
some places. This happened because:
1. The ScrollWrapper inside TabList has `height: 100%` by default
2. The parent container in ShowPageSubContainer uses `display: flex`
when tabs should be shown
3. This combination makes the ScrollWrapper expand to fill the available
space

## Fix
Added a wrapper `<div>` around the ScrollWrapper in the TabList
component. This works because:
1. It creates a new flex container that contains the ScrollWrapper's
expansion
2. It preserves the flex context needed by ShowPageSubContainer for
proper layout
3. It maintains all visual styles including the tab borders

## Technical Details
While using `heightMode="fit-content"` on ScrollWrapper might seem like
a fix, it breaks the interaction between TabList and its parent
containers that use flex layout for positioning.

before: 

<img width="537" alt="Screenshot 2025-03-13 at 02 16 03"
src="https://github.com/user-attachments/assets/9d4ddc81-68e8-44fe-8d32-da1d8e52492c"
/>

after:

<img width="518" alt="Screenshot 2025-03-13 at 02 11 50"
src="https://github.com/user-attachments/assets/dc8866c9-7dc3-4b59-8c18-d08233fc2143"
/>

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

@@ -3,19 +3,10 @@ import { SettingsAdminTabContent } from '@/settings/admin-panel/components/Setti
 import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAdminTabs';
 import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
-import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
 import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui';
 
-const StyledTabListContainer = styled.div`
-  align-items: center;
-  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
-  box-sizing: border-box;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
 export const SettingsAdminContent = () => {
   const currentUser = useRecoilValue(currentUserState);
 
@@ -44,13 +35,11 @@ export const SettingsAdminContent = () => {
 
   return (
     <>
-      <StyledTabListContainer>
+      <TabList
-        <TabList
+        tabs={tabs}
-          tabs={tabs}
+        tabListInstanceId={SETTINGS_ADMIN_TABS_ID}
-          tabListInstanceId={SETTINGS_ADMIN_TABS_ID}
+        behaveAsLinks={true}
-          behaveAsLinks={true}
+      />
-        />
-      </StyledTabListContainer>
       <SettingsAdminTabContent />
     </>
   );

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

@@ -61,38 +61,40 @@ export const TabList = ({
   }
 
   return (
-    <TabListScope tabListScopeId={tabListInstanceId}>
+    <div>
-      <TabListFromUrlOptionalEffect
+      <TabListScope tabListScopeId={tabListInstanceId}>
-        isInRightDrawer={!!isInRightDrawer}
+        <TabListFromUrlOptionalEffect
-        componentInstanceId={tabListInstanceId}
+          isInRightDrawer={!!isInRightDrawer}
-        tabListIds={tabs.map((tab) => tab.id)}
+          componentInstanceId={tabListInstanceId}
-      />
+          tabListIds={tabs.map((tab) => tab.id)}
-      <ScrollWrapper
+        />
-        defaultEnableYScroll={false}
+        <ScrollWrapper
-        contextProviderName="tabList"
+          defaultEnableYScroll={false}
-        componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
+          contextProviderName="tabList"
-      >
+          componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
-        <StyledContainer className={className}>
+        >
-          {visibleTabs.map((tab) => (
+          <StyledContainer className={className}>
-            <Tab
+            {visibleTabs.map((tab) => (
-              id={tab.id}
+              <Tab
-              key={tab.id}
+                id={tab.id}
-              title={tab.title}
+                key={tab.id}
-              Icon={tab.Icon}
+                title={tab.title}
-              logo={tab.logo}
+                Icon={tab.Icon}
-              active={tab.id === activeTabId}
+                logo={tab.logo}
-              disabled={tab.disabled ?? loading}
+                active={tab.id === activeTabId}
-              pill={tab.pill}
+                disabled={tab.disabled ?? loading}
-              to={behaveAsLinks ? `#${tab.id}` : undefined}
+                pill={tab.pill}
-              onClick={() => {
+                to={behaveAsLinks ? `#${tab.id}` : undefined}
-                if (!behaveAsLinks) {
+                onClick={() => {
-                  setActiveTabId(tab.id);
+                  if (!behaveAsLinks) {
-                }
+                    setActiveTabId(tab.id);
-              }}
+                  }
-            />
+                }}
-          ))}
+              />
-        </StyledContainer>
+            ))}
-      </ScrollWrapper>
+          </StyledContainer>
-    </TabListScope>
+        </ScrollWrapper>
+      </TabListScope>
+    </div>
   );
 };