mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

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

Closes #11956

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Abdul Rahman
2025-05-11 17:54:49 +05:30
committed by GitHub
parent 8216800a4a
commit 1f4d4c5265
6 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/twenty-front/src/modules/object-record/record-table/constants/TableZIndex.ts Normal file
View File

@ -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,
};

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

@ -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 {

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

@ -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`

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

@ -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 }>`

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

@ -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: '';

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

@ -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};
}
}
`;