diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx index 445e430161..4328f0afcd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx @@ -7,6 +7,7 @@ import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record- import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthClassName'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName'; +import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; import { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName'; @@ -74,9 +75,9 @@ const StyledTable = styled.div<{ // } @media (max-width: ${MOBILE_VIEWPORT}px) { - width: 38px; - max-width: 38px; - min-width: 38px; + width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + max-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + min-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; } } @@ -95,22 +96,12 @@ const StyledTable = styled.div<{ div.table-cell-0-0 { position: sticky; left: 48px; - - @media (max-width: ${MOBILE_VIEWPORT}px) { - width: ${38}px; - max-width: ${38}px; - } } div.table-cell:nth-of-type(3) { position: sticky; left: 48px; z-index: ${TABLE_Z_INDEX.cell.sticky}; - - @media (max-width: ${MOBILE_VIEWPORT}px) { - width: ${38}px; - max-width: ${38}px; - } } div.${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME} { @@ -144,6 +135,18 @@ const StyledTable = styled.div<{ min-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)}); max-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)}); } \n`; + + const isLabelIdentifierColumn = i === 0; + + if (isLabelIdentifierColumn) { + returnedCSS += `div.${getRecordTableColumnFieldWidthClassName(i)} { + @media (max-width: ${MOBILE_VIEWPORT}px) { + width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + max-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + min-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + } + } \n`; + } } returnedCSS += `${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile.ts new file mode 100644 index 0000000000..425812b801 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile.ts @@ -0,0 +1 @@ +export const RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE = 38; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx index ce7e607746..5cf6473ced 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx @@ -1,12 +1,14 @@ import styled from '@emotion/styled'; import { useContext } from 'react'; +import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile'; import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext'; import { RecordTableColumnFooterWithDropdown } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterWithDropdown'; import { findByProperty, isDefined } from 'twenty-shared/utils'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; const StyledColumnFooterCell = styled.div<{ columnWidth: number; @@ -32,17 +34,22 @@ const StyledColumnFooterCell = styled.div<{ }}; height: ${RECORD_TABLE_ROW_HEIGHT}px; - user-select: none; - overflow: auto; - scrollbar-width: none; - -ms-overflow-style: none; - *::-webkit-scrollbar { - display: none; - } + overflow: hidden; position: sticky; bottom: 0; + ${({ isFirstCell }) => + isFirstCell + ? ` + @media (max-width: ${MOBILE_VIEWPORT}px) { + width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + max-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + min-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px; + } + ` + : ''} + ${({ isFirstCell, isTableWithGroups }) => isFirstCell ? `left: 48px; z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.stickyColumn : TABLE_Z_INDEX.footer.tableWithoutGroups.stickyColumn};` 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 7ab67edadf..9d3593265e 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 @@ -10,8 +10,6 @@ import { RecordTableHeaderLastEmptyColumn } from '@/object-record/record-table/r import { useResizeTableHeader } from '@/object-record/record-table/record-table-header/hooks/useResizeTableHeader'; import { filterOutByProperty } from 'twenty-shared/utils'; -export const FIRST_TH_WIDTH = '10px'; - export const RecordTableHeader = () => { const { visibleRecordFields } = useRecordTableContextOrThrow(); const { labelIdentifierFieldMetadataItem } = useRecordIndexContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCell.tsx index d952bcec4b..ee69094abf 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCell.tsx @@ -21,16 +21,12 @@ import { useState } from 'react'; import { findByProperty } from 'twenty-shared/utils'; const StyledColumnHeadContainer = styled.div` + cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; + overflow: hidden; - - cursor: pointer; - - & > :first-of-type { - flex: 1; - } `; export const RecordTableHeaderLabelIdentifierCell = () => {