Fix safari broken table (#11399)

Fixes #11254

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>
-                <StyledTableContainer>
+                <RecordTable />
-                  <StyledTableInternalContainer>
+              </StyledTableContainer>
-                    <RecordTable />
-                  </StyledTableInternalContainer>
-                </StyledTableContainer>
-              </StyledTableWithHeader>
             </RecordUpdateContext.Provider>
           </ScrollWrapper>
         </EntityDeleteContext.Provider>

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 = () => {

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`

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>
   );