fix: z-index conflict between aggregate footer and cell popups (#11973)

https://github.com/user-attachments/assets/06f0e76f-69df-4a34-90ca-8d177744d89b

Closes #11956

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/object-record/record-table/constants/TableZIndex.ts

@@ -0,0 +1,17 @@
+export const TABLE_Z_INDEX = {
+  base: 1,
+  cell: {
+    default: 1,
+    sticky: 4,
+    editMode: 6,
+  },
+  footer: {
+    default: 4,
+    stickyColumn: 5,
+  },
+  header: {
+    default: 6,
+    stickyColumn: 10,
+  },
+  columnGrip: 30,
+};

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx

@@ -1,24 +1,26 @@
 import styled from '@emotion/styled';
 
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
+
 const StyledTbody = styled.tbody`
   &.first-columns-sticky {
     td:nth-of-type(1) {
       position: sticky;
       left: 0;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.cell.sticky};
       transition: transform 0.3s ease;
     }
     td:nth-of-type(2) {
       position: sticky;
       left: 11px;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.cell.sticky};
       transition: transform 0.3s ease;
     }
     tr:not(:last-child) td:nth-of-type(3) {
       // Last row is aggregate footer
       position: sticky;
       left: 43px;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.cell.sticky};
       transition: transform 0.3s ease;
 
       &:not(.disable-shadow)::after {

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx

@@ -3,6 +3,7 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
 import { recordFieldInputIsFieldInErrorComponentState } from '@/object-record/record-field/states/recordFieldInputIsFieldInErrorComponentState';
 import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionComponentState';
 import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useSetRecordTableFocusPosition } from '@/object-record/record-table/hooks/internal/useSetRecordTableFocusPosition';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
@@ -27,7 +28,7 @@ const StyledEditableCellEditModeContainer = styled.div<{
   height: 100%;
   position: absolute;
   width: calc(100% + 2px);
-  z-index: 6;
+  z-index: ${TABLE_Z_INDEX.cell.editMode};
 `;
 
 const StyledInputModeOnlyContainer = styled.div`

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { useRecordTableRowDraggableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { IconListViewGrip } from 'twenty-ui/input';
@@ -17,7 +18,7 @@ const StyledContainer = styled.div`
     opacity: 1;
   }
 
-  z-index: 200;
+  z-index: ${TABLE_Z_INDEX.columnGrip};
 `;
 
 const StyledIconWrapper = styled.div<{ isDragging: boolean }>`

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { RecordTableAggregateFooterCell } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell';
 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';
@@ -16,14 +17,14 @@ const StyledTd = styled.td`
 const StyledTableRow = styled.tr<{
   hasHorizontalOverflow?: boolean;
 }>`
-  z-index: 6;
+  z-index: ${TABLE_Z_INDEX.footer.default};
   position: sticky;
   border: none;
 
   &.footer-sticky {
     td {
       border-top: ${({ theme }) => `1px solid ${theme.border.color.light}`};
-      z-index: 5;
+      z-index: ${TABLE_Z_INDEX.footer.default};
       position: sticky;
       bottom: 0;
     }
@@ -35,9 +36,12 @@ const StyledTableRow = styled.tr<{
     border-top: none;
   }
   &.first-columns-sticky {
+    td:nth-of-type(1) {
+      z-index: ${TABLE_Z_INDEX.footer.stickyColumn};
+    }
     td:nth-of-type(2) {
       position: sticky;
-      z-index: 10;
+      z-index: ${TABLE_Z_INDEX.footer.stickyColumn};
       transition: 0.3s ease;
       &::after {
         content: '';

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell';
 import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
@@ -26,21 +27,21 @@ const StyledTableHead = styled.thead`
     th:nth-of-type(1) {
       position: sticky;
       left: 0;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.header.default};
       transition: 0.3s ease;
     }
 
     th:nth-of-type(2) {
       position: sticky;
       left: 11px;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.header.default};
       transition: 0.3s ease;
     }
 
     th:nth-of-type(3) {
       position: sticky;
       left: 43px;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.header.default};
       transition: 0.3s ease;
 
       &::after {
@@ -65,7 +66,7 @@ const StyledTableHead = styled.thead`
     th {
       position: sticky;
       top: 0;
-      z-index: 6;
+      z-index: ${TABLE_Z_INDEX.header.default};
     }
   }
 
@@ -73,7 +74,7 @@ const StyledTableHead = styled.thead`
     th:nth-of-type(1),
     th:nth-of-type(2),
     th:nth-of-type(3) {
-      z-index: 10;
+      z-index: ${TABLE_Z_INDEX.header.stickyColumn};
     }
   }
 `;