From 2be2b36e01c0f9046c1e042b530e3b1b911be464 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 13 Mar 2025 14:14:09 +0530
Subject: [PATCH] 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"
/>
---
 .../components/SettingsAdminContent.tsx       | 21 ++----
 .../ui/layout/tab/components/TabList.tsx      | 68 ++++++++++---------
 2 files changed, 40 insertions(+), 49 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx
index 998a9d0a5..1417815cb 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx
+++ b/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
-          tabs={tabs}
-          tabListInstanceId={SETTINGS_ADMIN_TABS_ID}
-          behaveAsLinks={true}
-        />
-      </StyledTabListContainer>
+      <TabList
+        tabs={tabs}
+        tabListInstanceId={SETTINGS_ADMIN_TABS_ID}
+        behaveAsLinks={true}
+      />
       <SettingsAdminTabContent />
     </>
   );
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
index 78456c952..47ae16fee 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@@ -61,38 +61,40 @@ export const TabList = ({
   }
 
   return (
-    <TabListScope tabListScopeId={tabListInstanceId}>
-      <TabListFromUrlOptionalEffect
-        isInRightDrawer={!!isInRightDrawer}
-        componentInstanceId={tabListInstanceId}
-        tabListIds={tabs.map((tab) => tab.id)}
-      />
-      <ScrollWrapper
-        defaultEnableYScroll={false}
-        contextProviderName="tabList"
-        componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
-      >
-        <StyledContainer className={className}>
-          {visibleTabs.map((tab) => (
-            <Tab
-              id={tab.id}
-              key={tab.id}
-              title={tab.title}
-              Icon={tab.Icon}
-              logo={tab.logo}
-              active={tab.id === activeTabId}
-              disabled={tab.disabled ?? loading}
-              pill={tab.pill}
-              to={behaveAsLinks ? `#${tab.id}` : undefined}
-              onClick={() => {
-                if (!behaveAsLinks) {
-                  setActiveTabId(tab.id);
-                }
-              }}
-            />
-          ))}
-        </StyledContainer>
-      </ScrollWrapper>
-    </TabListScope>
+    <div>
+      <TabListScope tabListScopeId={tabListInstanceId}>
+        <TabListFromUrlOptionalEffect
+          isInRightDrawer={!!isInRightDrawer}
+          componentInstanceId={tabListInstanceId}
+          tabListIds={tabs.map((tab) => tab.id)}
+        />
+        <ScrollWrapper
+          defaultEnableYScroll={false}
+          contextProviderName="tabList"
+          componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
+        >
+          <StyledContainer className={className}>
+            {visibleTabs.map((tab) => (
+              <Tab
+                id={tab.id}
+                key={tab.id}
+                title={tab.title}
+                Icon={tab.Icon}
+                logo={tab.logo}
+                active={tab.id === activeTabId}
+                disabled={tab.disabled ?? loading}
+                pill={tab.pill}
+                to={behaveAsLinks ? `#${tab.id}` : undefined}
+                onClick={() => {
+                  if (!behaveAsLinks) {
+                    setActiveTabId(tab.id);
+                  }
+                }}
+              />
+            ))}
+          </StyledContainer>
+        </ScrollWrapper>
+      </TabListScope>
+    </div>
   );
 };