From 8643eaa28f8e31cb5dd804cf4f35df9fedd2cb5b Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 13 Jan 2025 18:10:33 +0530
Subject: [PATCH] Aggregate footer should have pseudo element only if there is
 horizontal scroll (#9559)

fixes
https://discord.com/channels/1130383047699738754/1326614903414587534/1326903218214666261
---
 .../components/RecordTableAggregateFooter.tsx | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx
index cba9d7125..eff130018 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx
@@ -4,6 +4,7 @@ import { RecordTableAggregateFooterCell } from '@/object-record/record-table/rec
 import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
 import { FIRST_TH_WIDTH } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
@@ -11,7 +12,10 @@ const StyledTh = styled.th`
   background-color: ${({ theme }) => theme.background.primary};
 `;
 
-const StyledTableFoot = styled.thead<{ endOfTableSticky?: boolean }>`
+const StyledTableFoot = styled.thead<{
+  endOfTableSticky?: boolean;
+  hasHorizontalOverflow?: boolean;
+}>`
   cursor: pointer;
   th:nth-of-type(1) {
     width: ${FIRST_TH_WIDTH};
@@ -60,10 +64,13 @@ const StyledTableFoot = styled.thead<{ endOfTableSticky?: boolean }>`
     position: sticky;
     z-index: 5;
     background: ${({ theme }) => theme.background.primary};
-    ${({ endOfTableSticky }) =>
+    ${({ endOfTableSticky, hasHorizontalOverflow }) =>
       endOfTableSticky &&
       `
-        bottom: 10px;
+      bottom: ${hasHorizontalOverflow ? '10px' : '0'};
+      ${
+        hasHorizontalOverflow &&
+        `
         &::after {
           content: '';
           position: absolute;
@@ -73,7 +80,9 @@ const StyledTableFoot = styled.thead<{ endOfTableSticky?: boolean }>`
           height: 10px;
           background: inherit;
         }
-      `}
+      `
+      }
+    `}
   }
 `;
 
@@ -89,11 +98,21 @@ export const RecordTableAggregateFooter = ({
     visibleTableColumnsComponentSelector,
   );
 
+  const overlayScrollbarsInstance = useRecoilComponentValueV2(
+    scrollWrapperInstanceComponentState,
+  );
+
+  const hasHorizontalOverflow = overlayScrollbarsInstance
+    ? overlayScrollbarsInstance.elements().scrollOffsetElement.scrollWidth >
+      overlayScrollbarsInstance.elements().scrollOffsetElement.clientWidth
+    : false;
+
   return (
     <StyledTableFoot
       id={`record-table-footer${currentRecordGroupId ? '-' + currentRecordGroupId : ''}`}
       data-select-disable
       endOfTableSticky={endOfTableSticky}
+      hasHorizontalOverflow={hasHorizontalOverflow}
     >
       <tr>
         <StyledTh />