From c6627f1e991eec76d05c13ad8cfb9d511d6cee1c Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Thu, 22 May 2025 15:29:32 +0530
Subject: [PATCH] fix: prevent empty state from scrolling in table view
 (#12197)

https://github.com/user-attachments/assets/334ffd15-a639-4947-8142-c19bc231c9bd



Closes #12132
---
 .../record-table/components/RecordTable.tsx           |  5 +----
 .../record-table/components/RecordTableEmpty.tsx      | 11 ++++++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
index cf4512878..6c7d7df37 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -68,10 +68,7 @@ export const RecordTable = () => {
       <RecordTableScrollToFocusedCellEffect />
       <RecordTableScrollToFocusedRowEffect />
       {recordTableIsEmpty && !hasRecordGroups ? (
-        <RecordTableEmpty
-          tableBodyRef={tableBodyRef}
-          hasRecordGroups={hasRecordGroups}
-        />
+        <RecordTableEmpty tableBodyRef={tableBodyRef} />
       ) : (
         <RecordTableContent
           tableBodyRef={tableBodyRef}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx
index 4f36af051..8209cbb2a 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx
@@ -1,17 +1,22 @@
 import { StyledTable } from '@/object-record/record-table/components/RecordTableStyles';
 import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
 import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
+import styled from '@emotion/styled';
+
+const StyledEmptyStateContainer = styled.div`
+  height: 100%;
+  overflow: hidden;
+`;
 
 export interface RecordTableEmptyProps {
   tableBodyRef: React.RefObject<HTMLTableElement>;
-  hasRecordGroups: boolean;
 }
 
 export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => (
-  <>
+  <StyledEmptyStateContainer>
     <StyledTable ref={tableBodyRef}>
       <RecordTableHeader />
     </StyledTable>
     <RecordTableEmptyState />
-  </>
+  </StyledEmptyStateContainer>
 );