From 8fa09e21ec92b27b1652511c1c9ef8f1420f1e4d Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 4 Apr 2025 19:16:33 +0200
Subject: [PATCH] Fix safari broken table (#11399)

Fixes #11254
---
 .../components/RecordTableWithWrappers.tsx    | 19 +++----------------
 .../SettingsNavigationDrawerItems.tsx         |  1 +
 .../ui/layout/tab/components/TabList.tsx      |  3 ++-
 .../scroll/components/ScrollWrapper.tsx       |  7 +------
 4 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index 2949c146f..ff83c6a21 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -20,21 +20,12 @@ import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkey
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Key } from 'ts-key-enum';
 
-const StyledTableWithHeader = styled.div`
-  height: 100%;
-`;
-
 const StyledTableContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
   position: relative;
 `;
 
-const StyledTableInternalContainer = styled.div`
-  height: 100%;
-`;
-
 type RecordTableWithWrappersProps = {
   objectNameSingular: string;
   recordTableId: string;
@@ -105,13 +96,9 @@ export const RecordTableWithWrappers = ({
             componentInstanceId={`record-table-scroll-${recordTableId}`}
           >
             <RecordUpdateContext.Provider value={updateRecordMutation}>
-              <StyledTableWithHeader>
-                <StyledTableContainer>
-                  <StyledTableInternalContainer>
-                    <RecordTable />
-                  </StyledTableInternalContainer>
-                </StyledTableContainer>
-              </StyledTableWithHeader>
+              <StyledTableContainer>
+                <RecordTable />
+              </StyledTableContainer>
             </RecordUpdateContext.Provider>
           </ScrollWrapper>
         </EntityDeleteContext.Provider>
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index ffcdec98c..712cf02df 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -16,6 +16,7 @@ import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledInnerContainer = styled.div`
   height: 100%;
+  width: 100%;
 `;
 
 export const SettingsNavigationDrawerItems = () => {
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 6831196d7..89764a728 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
@@ -7,8 +7,8 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
 import styled from '@emotion/styled';
 import * as React from 'react';
 import { useEffect } from 'react';
-import { Tab } from './Tab';
 import { IconComponent } from 'twenty-ui/display';
+import { Tab } from './Tab';
 
 export type SingleTabProps<T extends string = string> = {
   title: string;
@@ -37,6 +37,7 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
   height: 40px;
   user-select: none;
+  width: 100%;
 `;
 
 const StyledOuterContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
index cc9bfbfeb..eb45d905e 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -19,11 +19,6 @@ const StyledScrollWrapper = styled.div`
   height: 100%;
 `;
 
-const StyledInnerContainer = styled.div`
-  height: 100%;
-  width: 100%;
-`;
-
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
@@ -76,7 +71,7 @@ export const ScrollWrapper = ({
         className={className}
         onScroll={handleScroll}
       >
-        <StyledInnerContainer>{children}</StyledInnerContainer>
+        {children}
       </StyledScrollWrapper>
     </ScrollWrapperComponentInstanceContext.Provider>
   );