From a86cc5cb9cce17ad6b554f03a06474833ae11d7e Mon Sep 17 00:00:00 2001
From: Antar Das <antardas2334@gmail.com>
Date: Fri, 19 Jul 2024 22:00:31 +0600
Subject: [PATCH] fix: icon visibility on horizontal scroll #6304 (#6315)

https://github.com/user-attachments/assets/5f8741ad-bdab-4ef3-8741-dacbd2381ea3

fix: When scrolling horizontally, table header goes behind the first
frozen column #6304
---
 .../components/RecordTableHeaderDragDropColumn.tsx       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
index 3acf7afa9..9c771f9a1 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
@@ -1,10 +1,15 @@
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui';
 
-const StyledTh = styled.th`
+const StyledTh = styled.th<{ backgroundColor: string;}>`
   border-bottom: none;
   border-top: none;
+	background: ${({ backgroundColor }) => backgroundColor};
 `;
 
 export const RecordTableHeaderDragDropColumn = () => {
-  return <StyledTh></StyledTh>;
+	const { theme } = useContext(ThemeContext);
+	
+  return <StyledTh backgroundColor={theme.background.primary}></StyledTh>;
 };