diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx index f9678b4111e..e7420657a03 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx @@ -1,16 +1,20 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { useIcons } from '@/ui/display/icon/hooks/useIcons'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState'; import { ColumnDefinition } from '../types/ColumnDefinition'; type ColumnHeadProps = { column: ColumnDefinition; + isLabelIdentifier: boolean; }; -const StyledTitle = styled.div` +const StyledTitle = styled.div<{ hideTitle?: boolean }>` align-items: center; display: flex; flex-direction: row; @@ -19,6 +23,8 @@ const StyledTitle = styled.div` height: ${({ theme }) => theme.spacing(8)}; padding-left: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)}; + + ${({ hideTitle }) => hideTitle && useIsMobile() && `display: none;`} `; const StyledIcon = styled.div` @@ -36,14 +42,16 @@ const StyledText = styled.span` white-space: nowrap; `; -export const ColumnHead = ({ column }: ColumnHeadProps) => { +export const ColumnHead = ({ isLabelIdentifier, column }: ColumnHeadProps) => { const theme = useTheme(); const { getIcon } = useIcons(); const Icon = getIcon(column.iconName); + const scrollLeft = useRecoilValue(scrollLeftState); + return ( - + 0}> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 20e08592fc7..d754affed4b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -10,6 +10,7 @@ import { RecordTableContext } from '@/object-record/record-table/contexts/Record import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; import { rgba } from '@/ui/theme/constants/colors'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; const StyledTable = styled.table` border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -96,6 +97,16 @@ const StyledTable = styled.table` tbody td:nth-of-type(3) { border-left: 1px solid ${({ theme }) => theme.border.color.light}; } + + ${() => + useIsMobile() && + ` + &.freeze-first-columns-shadow thead th:nth-of-type(2), + &.freeze-first-columns-shadow tbody td:nth-of-type(2) { + width: 35px; + max-width: 35px; + } + `} `; type RecordTableProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx index a238792bd5c..fc4b7779f0f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx @@ -11,6 +11,7 @@ import { IconPlus } from '@/ui/display/icon'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown'; @@ -73,6 +74,7 @@ const StyledHeaderIcon = styled.div` margin-bottom: ${({ theme }) => theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)}; margin-top: ${({ theme }) => theme.spacing(1)}; + margin-left: ${({ theme }) => theme.spacing(1.5)}; `; export const RecordTableHeaderCell = ({ @@ -174,17 +176,19 @@ export const RecordTableHeaderCell = ({ 24, COLUMN_MIN_WIDTH, )} + onMouseEnter={() => setIconVisibility(true)} + onMouseLeave={() => setIconVisibility(false)} > - setIconVisibility(true)} - onMouseLeave={() => setIconVisibility(false)} - > + {column.isLabelIdentifier ? ( - + ) : ( )} - {iconVisibility && !!column.isLabelIdentifier && ( + {(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (