diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnMinWidth.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnMinWidth.ts deleted file mode 100644 index 8ba4ab7897..0000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnMinWidth.ts +++ /dev/null @@ -1 +0,0 @@ -export const COLUMN_MIN_WIDTH = 48; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnMinWidth.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnMinWidth.ts new file mode 100644 index 0000000000..55b49d8d93 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnMinWidth.ts @@ -0,0 +1 @@ +export const RECORD_TABLE_COLUMN_MIN_WIDTH = 104; 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 d366c36f95..1d680ddd9b 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 @@ -76,7 +76,7 @@ export const RecordTableAggregateFooter = ({ > ); 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 5cf6473ced..496d970256 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 @@ -7,6 +7,8 @@ import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZInde 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 { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName'; +import { cx } from '@linaria/core'; import { findByProperty, isDefined } from 'twenty-shared/utils'; import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; @@ -18,6 +20,8 @@ const StyledColumnFooterCell = styled.div<{ background-color: ${({ theme }) => theme.background.primary}; color: ${({ theme }) => theme.font.color.tertiary}; + border-right: solid 1px ${({ theme }) => theme.background.primary}; + padding: 0; ${({ columnWidth }) => ` @@ -63,10 +67,10 @@ const StyledColumnFootContainer = styled.div` `; export const RecordTableAggregateFooterCell = ({ - isFirstCell = false, + columnIndex, currentRecordGroupId, }: { - isFirstCell?: boolean; + columnIndex: number; currentRecordGroupId?: string; }) => { const { visibleRecordFields } = useRecordTableContextOrThrow(); @@ -81,6 +85,8 @@ export const RecordTableAggregateFooterCell = ({ const isTableWithGroups = isDefined(currentRecordGroupId); + const isFirstCell = columnIndex === 0; + if (!isDefined(recordField)) { return null; } @@ -89,7 +95,10 @@ export const RecordTableAggregateFooterCell = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts index d30d2821fb..b6822feb7a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts @@ -1,7 +1,7 @@ import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpdateRecordField'; -import { COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/ColumnMinWidth'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName'; +import { RECORD_TABLE_COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnMinWidth'; import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; @@ -75,7 +75,7 @@ export const useResizeTableHeader = () => { const newRecordFieldSizeWithOffset = recordField.size + newResizeOffset; - if (newRecordFieldSizeWithOffset < COLUMN_MIN_WIDTH) { + if (newRecordFieldSizeWithOffset < RECORD_TABLE_COLUMN_MIN_WIDTH) { return; } @@ -133,7 +133,10 @@ export const useResizeTableHeader = () => { ); const nextWidth = Math.round( - Math.max(recordField.size + resizeFieldOffset, COLUMN_MIN_WIDTH), + Math.max( + recordField.size + resizeFieldOffset, + RECORD_TABLE_COLUMN_MIN_WIDTH, + ), ); set(resizeFieldOffsetCallbackState, 0);