diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/TableZIndex.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableZIndex.ts new file mode 100644 index 000000000..662a488b9 --- /dev/null +++ b/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, +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx index 1363ff88c..627f0654d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx +++ b/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 { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx index 13b18d27b..2971f2c12 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx +++ b/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` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx index 8578c7407..4a9e76503 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx +++ b/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 }>` 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 a0778439c..068b4bea3 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 @@ -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: ''; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx index f255231c9..5a6211b54 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx +++ b/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}; } } `;