houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix table mobile display issues (#14528)

Browse Source 
This PR fixes table issues while displaying on mobile, the label
identifier cell and footer cells where using a width not corresponding
to the header cell.

We fix this by creating a shared constant and adapting the CSS for this
case with a media query.

Fixes https://github.com/twentyhq/core-team-issues/issues/1454
This commit is contained in:
Lucas Bordeau
2025-09-16 14:20:18 +02:00
committed by GitHub
parent 69c4b00796
commit 8f42c33bd4
5 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx
+16 -13
View File
@@ -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;`;
packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile.ts
+1
View File
@@ -0,0 +1 @@
export const RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE = 38;
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx
+14 -7
View File
@@ -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};`
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
-2
View File
@@ -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();
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLabelIdentifierCell.tsx
+2 -6
View File
@@ -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 = () => {