Skip to content

Commit 05b3055

Browse files
lucasbordeaulucasbordeau
authored
Add back first column shrink on mobile (#16244)
This PR fixes #14829 I created two states because one was needed for the table and the other for the ChipFieldDisplay, which can appear anywhere. The states tell if the first column and the ChipFieldDisplay should be shrinked. I also removed the usage of `useRecordTableLastColumnWidthToFill` to avoid unnecessary re-renders of the whole table on scroll. ## Before https://github.com/user-attachments/assets/8b6886b3-8976-41c2-9937-5d7ea396ec56 ## After https://github.com/user-attachments/assets/dc3b5ff9-59c4-4954-a973-57f6edc2508e
1 parent 3274c18 commit 05b3055

File tree

15 files changed

+179
-97
lines changed

15 files changed

+179
-97
lines changed

‎packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ChipFieldDisplay.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { RecordChip } from '@/object-record/components/RecordChip';
22
import { useChipFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay';
3+
import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
4+
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
35
import { isDefined } from 'twenty-shared/utils';
46
import { ChipSize } from 'twenty-ui/components';
5-
import { useIsMobile } from 'twenty-ui/utilities';
67

78
export const ChipFieldDisplay = () => {
89
const {
@@ -15,10 +16,11 @@ export const ChipFieldDisplay = () => {
1516
onRecordChipClick,
1617
} = useChipFieldDisplay();
1718

18-
const isMobile = useIsMobile();
19+
const shouldCompactRecordIndexLabelIdentifier = useRecoilComponentValue(
20+
shouldCompactRecordIndexLabelIdentifierComponentState,
21+
);
1922

20-
// TODO: reimplement scrolled horizontally here.
21-
const isLabelIdentifierCompact = isMobile;
23+
const isLabelIdentifierCompact = shouldCompactRecordIndexLabelIdentifier;
2224

2325
if (!isDefined(recordValue)) {
2426
return null;

‎packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record
88
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
99
import { ComponentDecorator } from 'twenty-ui/testing';
1010
import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
11+
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
1112
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
1213
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
1314
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
@@ -16,6 +17,7 @@ import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockO
1617
const meta: Meta = {
1718
title: 'UI/Data/Field/Display/ChipFieldDisplay',
1819
decorators: [
20+
ContextStoreDecorator,
1921
(Story) => {
2022
const instanceId = 'child-field-display-scope';
2123

‎packages/twenty-front/src/modules/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
2+
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
3+
4+
export const shouldCompactRecordIndexLabelIdentifierComponentState =
5+
createComponentState<boolean>({
6+
key: 'shouldCompactRecordIndexLabelIdentifierComponentState',
7+
componentInstanceContext: ContextStoreComponentInstanceContext,
8+
defaultValue: false,
9+
});

‎packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx‎

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
1+
import { RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnAddColumnButtonWidth';
2+
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
3+
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
14
import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName';
5+
import { RECORD_TABLE_COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnMinWidth';
26
import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
7+
import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile';
38
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
4-
import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill';
9+
import { recordTableWidthComponentState } from '@/object-record/record-table/states/recordTableWidthComponentState';
510
import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState';
11+
import { shouldCompactRecordTableFirstColumnComponentState } from '@/object-record/record-table/states/shouldCompactRecordTableFirstColumnComponentState';
12+
import { computeLastRecordTableColumnWidth } from '@/object-record/record-table/utils/computeLastRecordTableColumnWidth';
13+
import { computeVisibleRecordFieldsWidthOnTable } from '@/object-record/record-table/utils/computeVisibleRecordFieldsWidthOnTable';
614
import { getRecordTableColumnFieldWidthCSSVariableName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthCSSVariableName';
715
import { updateRecordTableCSSVariable } from '@/object-record/record-table/utils/updateRecordTableCSSVariable';
16+
import { RECORD_TABLE_VIRTUALIZATION_BODY_PLACEHOLDER_WIDTH_CSS_VARIABLE_NAME } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedBodyPlaceholder';
817
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
18+
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
919

1020
import { useEffect } from 'react';
1121
import { isDefined } from 'twenty-shared/utils';
@@ -15,15 +25,47 @@ export const RecordTableColumnWidthEffect = () => {
1525
resizedFieldMetadataIdComponentState,
1626
);
1727

18-
const { lastColumnWidth } = useRecordTableLastColumnWidthToFill();
19-
2028
const { visibleRecordFields } = useRecordTableContextOrThrow();
2129

30+
const shouldCompactRecordTableFirstColumn = useRecoilComponentValue(
31+
shouldCompactRecordTableFirstColumnComponentState,
32+
);
33+
34+
const recordTableWidth = useRecoilComponentValue(
35+
recordTableWidthComponentState,
36+
);
37+
2238
useEffect(() => {
2339
if (isDefined(resizedFieldMetadataItemId)) {
2440
return;
2541
}
2642

43+
const { lastColumnWidth } = computeLastRecordTableColumnWidth({
44+
recordFields: visibleRecordFields,
45+
shouldCompactFirstColumn: shouldCompactRecordTableFirstColumn,
46+
tableWidth: recordTableWidth,
47+
});
48+
49+
const { visibleRecordFieldsWidth } = computeVisibleRecordFieldsWidthOnTable(
50+
{
51+
shouldCompactFirstColumn: shouldCompactRecordTableFirstColumn,
52+
visibleRecordFields,
53+
},
54+
);
55+
56+
const totalTableBodyWidth =
57+
visibleRecordFieldsWidth +
58+
RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
59+
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH +
60+
RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH +
61+
lastColumnWidth +
62+
visibleRecordFields.length;
63+
64+
updateRecordTableCSSVariable(
65+
RECORD_TABLE_VIRTUALIZATION_BODY_PLACEHOLDER_WIDTH_CSS_VARIABLE_NAME,
66+
`${totalTableBodyWidth}px`,
67+
);
68+
2769
updateRecordTableCSSVariable(
2870
RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME,
2971
`${lastColumnWidth}px`,
@@ -40,7 +82,27 @@ export const RecordTableColumnWidthEffect = () => {
4082
`${recordField.size}px`,
4183
);
4284
}
43-
}, [lastColumnWidth, resizedFieldMetadataItemId, visibleRecordFields]);
85+
86+
if (shouldCompactRecordTableFirstColumn) {
87+
updateRecordTableCSSVariable(
88+
getRecordTableColumnFieldWidthCSSVariableName(0),
89+
`${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px`,
90+
);
91+
} else {
92+
const firstColumnWidth =
93+
visibleRecordFields[0]?.size ?? RECORD_TABLE_COLUMN_MIN_WIDTH;
94+
95+
updateRecordTableCSSVariable(
96+
getRecordTableColumnFieldWidthCSSVariableName(0),
97+
`${firstColumnWidth}px`,
98+
);
99+
}
100+
}, [
101+
resizedFieldMetadataItemId,
102+
visibleRecordFields,
103+
recordTableWidth,
104+
shouldCompactRecordTableFirstColumn,
105+
]);
44106

45107
return null;
46108
};

‎packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { RecordTableStyleWrapper } from '@/object-record/record-table/components
44
import { RecordTableWidthEffect } from '@/object-record/record-table/components/RecordTableWidthEffect';
55
import { RECORD_TABLE_HTML_ID } from '@/object-record/record-table/constants/RecordTableHtmlId';
66
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
7-
import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill';
87
import { RecordTableNoRecordGroupBody } from '@/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody';
98
import { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody';
109
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
@@ -72,8 +71,6 @@ export const RecordTableContent = ({
7271

7372
const { visibleRecordFields } = useRecordTableContextOrThrow();
7473

75-
const { lastColumnWidth } = useRecordTableLastColumnWidthToFill();
76-
7774
const setRecordTableHoverPosition = useSetRecoilComponentState(
7875
recordTableHoverPositionComponentState,
7976
);
@@ -103,7 +100,6 @@ export const RecordTableContent = ({
103100
ref={tableBodyRef}
104101
isDragging={isDragging}
105102
visibleRecordFields={visibleRecordFields}
106-
lastColumnWidth={lastColumnWidth}
107103
id={RECORD_TABLE_HTML_ID}
108104
onMouseLeave={handleMouseLeave}
109105
hasRecordGroups={hasRecordGroups}

‎packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,16 @@ import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-
88
import { RECORD_TABLE_HTML_ID } from '@/object-record/record-table/constants/RecordTableHtmlId';
99
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
1010
import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
11-
import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill';
1211
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
1312
import { recordTableWidthComponentState } from '@/object-record/record-table/states/recordTableWidthComponentState';
1413
import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState';
1514
import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
15+
import { shouldCompactRecordTableFirstColumnComponentState } from '@/object-record/record-table/states/shouldCompactRecordTableFirstColumnComponentState';
1616
import { computeVisibleRecordFieldsWidthOnTable } from '@/object-record/record-table/utils/computeVisibleRecordFieldsWidthOnTable';
1717
import { RecordTableVirtualizedDataChangedEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedDataChangedEffect';
1818
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
1919
import styled from '@emotion/styled';
2020
import { isDefined } from 'twenty-shared/utils';
21-
import { useIsMobile } from 'twenty-ui/utilities';
2221

2322
const StyledEmptyStateContainer = styled.div<{ width: number }>`
2423
height: 100%;
@@ -47,7 +46,9 @@ export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => {
4746

4847
const isResizing = isDefined(resizedFieldMetadataId);
4948

50-
const isMobile = useIsMobile();
49+
const shouldCompactRecordTableFirstColumn = useRecoilComponentValue(
50+
shouldCompactRecordTableFirstColumnComponentState,
51+
);
5152

5253
const resizeOffsetToAddOnlyIfItMakesTableContainerGrow = isResizing
5354
? resizeFieldOffset > 0
@@ -58,12 +59,10 @@ export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => {
5859
const totalColumnsBorderWidth = visibleRecordFields.length;
5960

6061
const { visibleRecordFieldsWidth } = computeVisibleRecordFieldsWidthOnTable({
61-
isMobile,
62+
shouldCompactFirstColumn: shouldCompactRecordTableFirstColumn,
6263
visibleRecordFields,
6364
});
6465

65-
const { lastColumnWidth } = useRecordTableLastColumnWidthToFill();
66-
6766
const emptyTableContainerComputedWidth =
6867
visibleRecordFieldsWidth +
6968
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH +
@@ -86,7 +85,6 @@ export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => {
8685
<RecordTableStyleWrapper
8786
ref={tableBodyRef}
8887
visibleRecordFields={visibleRecordFields}
89-
lastColumnWidth={lastColumnWidth}
9088
id={RECORD_TABLE_HTML_ID}
9189
hasRecordGroups={hasRecordGroups}
9290
>

‎packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollAndZIndexEffect.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
1+
import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
12
import { RECORD_TABLE_HORIZONTAL_SCROLL_SHADOW_VISIBILITY_CSS_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableHorizontalScrollShadowVisibilityCssVariableName';
23
import { RECORD_TABLE_VERTICAL_SCROLL_SHADOW_VISIBILITY_CSS_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableVerticalScrollShadowVisibilityCssVariableName';
34
import { isRecordTableScrolledHorizontallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledHorizontallyComponentState';
45
import { isRecordTableScrolledVerticallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledVerticallyComponentState';
6+
import { shouldCompactRecordTableFirstColumnComponentState } from '@/object-record/record-table/states/shouldCompactRecordTableFirstColumnComponentState';
57
import { updateRecordTableCSSVariable } from '@/object-record/record-table/utils/updateRecordTableCSSVariable';
68

79
import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement';
810
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
11+
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
912

1013
import { useEffect } from 'react';
1114
import { isDefined } from 'twenty-shared/utils';
15+
import { useIsMobile } from 'twenty-ui/utilities';
1216

1317
export const RecordTableScrollAndZIndexEffect = () => {
1418
const { scrollWrapperHTMLElement } = useScrollWrapperHTMLElement();
15-
19+
const isMobile = useIsMobile();
1620
const [
1721
isRecordTableScrolledHorizontally,
1822
setIsRecordTableScrolledHorizontally,
1923
] = useRecoilComponentState(isRecordTableScrolledHorizontallyComponentState);
2024

25+
const setShouldCompactRecordTableFirstColumn = useSetRecoilComponentState(
26+
shouldCompactRecordTableFirstColumnComponentState,
27+
);
28+
29+
const setShouldCompactRecordIndexLabelIdentifier = useSetRecoilComponentState(
30+
shouldCompactRecordIndexLabelIdentifierComponentState,
31+
);
32+
2133
const [isRecordTableScrolledVertically, setIsRecordTableScrolledVertically] =
2234
useRecoilComponentState(isRecordTableScrolledVerticallyComponentState);
2335

@@ -57,6 +69,16 @@ export const RecordTableScrollAndZIndexEffect = () => {
5769
RECORD_TABLE_HORIZONTAL_SCROLL_SHADOW_VISIBILITY_CSS_VARIABLE_NAME,
5870
newVisibilityOfShadows,
5971
);
72+
73+
if (isMobile) {
74+
if (newIsScrolledHorizontally) {
75+
setShouldCompactRecordTableFirstColumn(true);
76+
setShouldCompactRecordIndexLabelIdentifier(true);
77+
} else {
78+
setShouldCompactRecordTableFirstColumn(false);
79+
setShouldCompactRecordIndexLabelIdentifier(false);
80+
}
81+
}
6082
}
6183
};
6284

@@ -71,6 +93,9 @@ export const RecordTableScrollAndZIndexEffect = () => {
7193
isRecordTableScrolledHorizontally,
7294
setIsRecordTableScrolledVertically,
7395
setIsRecordTableScrolledHorizontally,
96+
isMobile,
97+
setShouldCompactRecordTableFirstColumn,
98+
setShouldCompactRecordIndexLabelIdentifier,
7499
]);
75100

76101
return <></>;

‎packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx‎

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,13 @@ import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/obj
1010
import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName';
1111
import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
1212
import { RECORD_TABLE_HORIZONTAL_SCROLL_SHADOW_VISIBILITY_CSS_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableHorizontalScrollShadowVisibilityCssVariableName';
13-
import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile';
1413
import { RECORD_TABLE_VERTICAL_SCROLL_SHADOW_VISIBILITY_CSS_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableVerticalScrollShadowVisibilityCssVariableName';
1514

1615
import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
1716
import { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName';
1817
import { getRecordTableColumnFieldWidthCSSVariableName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthCSSVariableName';
1918
import { css, type Theme } from '@emotion/react';
2019
import styled from '@emotion/styled';
21-
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
2220

2321
export const VerticalScrollBoxShadowCSS = ({ theme }: { theme: Theme }) => css`
2422
&::before {
@@ -64,7 +62,6 @@ export const HorizontalScrollBoxShadowCSS = ({
6462
const StyledTable = styled.div<{
6563
isDragging?: boolean;
6664
visibleRecordFields: RecordField[];
67-
lastColumnWidth: number;
6865
hasRecordGroups: boolean;
6966
}>`
7067
& > * {
@@ -128,12 +125,6 @@ const StyledTable = styled.div<{
128125
: TABLE_Z_INDEX.headerColumns.withoutGroups.headerColumnsSticky};
129126
130127
${HorizontalScrollBoxShadowCSS}
131-
132-
@media (max-width: ${MOBILE_VIEWPORT}px) {
133-
width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
134-
max-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
135-
min-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
136-
}
137128
}
138129
139130
div.table-cell:nth-of-type(1) {
@@ -192,36 +183,21 @@ const StyledTable = styled.div<{
192183
max-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
193184
}
194185
195-
${({ visibleRecordFields, lastColumnWidth }) => {
186+
${({ visibleRecordFields }) => {
196187
let returnedCSS = '';
197188
198189
for (let i = 0; i < visibleRecordFields.length; i++) {
199190
returnedCSS += `--record-table-column-field-${i}: ${visibleRecordFields[i].size}px; \n`;
200191
}
201192
202193
for (let i = 0; i < visibleRecordFields.length; i++) {
203-
returnedCSS += `div.${getRecordTableColumnFieldWidthClassName(i)} {
204-
width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
205-
min-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
206-
max-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
194+
returnedCSS += `div.${getRecordTableColumnFieldWidthClassName(i)} {
195+
width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
196+
min-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
197+
max-width: var(${getRecordTableColumnFieldWidthCSSVariableName(i)});
207198
} \n`;
208-
209-
const isLabelIdentifierColumn = i === 0;
210-
211-
if (isLabelIdentifierColumn) {
212-
returnedCSS += `div.${getRecordTableColumnFieldWidthClassName(i)} {
213-
@media (max-width: ${MOBILE_VIEWPORT}px) {
214-
width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
215-
max-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
216-
min-width: ${RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE}px;
217-
}
218-
} \n`;
219-
}
220199
}
221200
222-
returnedCSS += `${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`;
223-
returnedCSS += `${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`;
224-
225201
return returnedCSS;
226202
}};
227203

0 commit comments

Comments
 (0)