diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx index e4c29daa4..bbc54d04f 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx @@ -22,7 +22,6 @@ export type RecordChipProps = { maxWidth?: number; to?: string | undefined; size?: ChipSize; - isLabelHidden?: boolean; }; export const RecordChip = ({ @@ -34,7 +33,6 @@ export const RecordChip = ({ to, size, forceDisableClick = false, - isLabelHidden = false, }: RecordChipProps) => { const { recordChipData } = useRecordChipData({ objectNameSingular, @@ -78,7 +76,6 @@ export const RecordChip = ({ maxWidth={maxWidth} placeholderColorSeed={record.id} name={recordChipData.name} - isLabelHidden={isLabelHidden} avatarType={recordChipData.avatarType} avatarUrl={recordChipData.avatarUrl ?? ''} className={className} diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx index 27c8c02d7..285c0217d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx @@ -1,5 +1,4 @@ import { RecordChip } from '@/object-record/components/RecordChip'; -import { useIsChipFieldDisplayLabelHidden } from '@/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden'; import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay'; import { isDefined } from 'twenty-shared'; import { ChipSize } from 'twenty-ui'; @@ -8,8 +7,6 @@ export const ChipFieldDisplay = () => { const { recordValue, objectNameSingular, labelIdentifierLink } = useChipFieldDisplay(); - const isChipFieldDisplayLabelHidden = useIsChipFieldDisplayLabelHidden(); - if (!isDefined(recordValue)) { return null; } @@ -20,7 +17,6 @@ export const ChipFieldDisplay = () => { record={recordValue} size={ChipSize.Small} to={labelIdentifierLink} - isLabelHidden={isChipFieldDisplayLabelHidden} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx index 688b64dcf..bc2964a29 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx @@ -5,7 +5,6 @@ import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlur import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ChipFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ChipFieldDisplay'; import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; @@ -23,25 +22,18 @@ const meta: Meta = { )!; return ( - {}, + indexIdentifierUrl: () => '', + onIndexRecordsLoaded: () => {}, + objectNamePlural: CoreObjectNamePlural.Company, + objectNameSingular: CoreObjectNameSingular.Company, + objectMetadataItem: companyObjectMetadataItem, + recordIndexId: instanceId, }} > - '', - onIndexRecordsLoaded: () => {}, - objectNamePlural: CoreObjectNamePlural.Company, - objectNameSingular: CoreObjectNameSingular.Company, - objectMetadataItem: companyObjectMetadataItem, - recordIndexId: instanceId, - }} - > - - - + + ); }, MemoryRouterDecorator, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts deleted file mode 100644 index fc042c702..000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; -import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState'; -import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useContext } from 'react'; -import { useIsMobile } from 'twenty-ui'; - -export const useIsChipFieldDisplayLabelHidden = () => { - const isMobile = useIsMobile(); - - const isRecordTableScrolledLeft = useRecoilComponentValueV2( - isRecordTableScrolledLeftComponentState, - ); - - const { columnDefinition } = useContext(RecordTableCellContext); - - const isLabelIdentifierInRecordTable = columnDefinition?.isLabelIdentifier; - - const isLabelHidden = - isMobile && !isRecordTableScrolledLeft && isLabelIdentifierInRecordTable; - - return isLabelHidden; -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx index 8022cce69..26b1fa747 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; const StyledTbody = styled.tbody` &.first-columns-sticky { @@ -21,6 +22,18 @@ const StyledTbody = styled.tbody` z-index: 5; transition: 0.3s ease; + @media (max-width: ${MOBILE_VIEWPORT}px) { + & [data-testid='editable-cell-display-mode'] { + [data-testid='tooltip'] { + display: none; + } + + [data-testid='chip'] { + gap: 0; + } + } + } + &:not(.disable-shadow)::after { content: ''; position: absolute; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index 84b3002a1..bce1d6476 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -1,6 +1,6 @@ import { ReactElement, useContext, useEffect, useRef } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight, useIsMobile } from 'twenty-ui'; +import { IconArrowUpRight } from 'twenty-ui'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty'; @@ -80,12 +80,8 @@ export const RecordTableCellSoftFocusMode = ({ ? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now : customButtonIcon; - const isMobile = useIsMobile(); const showButton = - isDefined(buttonIcon) && - !editModeContentOnly && - !isFieldReadOnly && - !(isMobile && isFirstColumn); + isDefined(buttonIcon) && !editModeContentOnly && !isFieldReadOnly; const dontShowContent = isEmpty && isFieldReadOnly; diff --git a/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx b/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx index 07f7c4225..2a7edc484 100644 --- a/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx +++ b/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx @@ -8,7 +8,6 @@ export type LinkAvatarChipProps = Omit & { to: string; onClick?: LinkChipProps['onClick']; variant?: AvatarChipVariant; - isLabelHidden?: boolean; }; export const LinkAvatarChip = ({ @@ -25,13 +24,11 @@ export const LinkAvatarChip = ({ placeholderColorSeed, size, variant, - isLabelHidden, }: LinkAvatarChipProps) => ( missleading variant === AvatarChipVariant.Regular diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 4f471479e..29d0516df 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -26,7 +26,6 @@ export type ChipProps = { disabled?: boolean; clickable?: boolean; label: string; - isLabelHidden?: boolean; maxWidth?: number; variant?: ChipVariant; accent?: ChipAccent; @@ -125,7 +124,6 @@ const StyledContainer = withTheme(styled.div< export const Chip = ({ size = ChipSize.Small, label, - isLabelHidden = false, disabled = false, clickable = true, variant = ChipVariant.Regular, @@ -147,9 +145,7 @@ export const Chip = ({ maxWidth={maxWidth} > {leftComponent?.()} - {!isLabelHidden && ( - - )} + {rightComponent?.()} ); diff --git a/packages/twenty-ui/src/display/chip/components/LinkChip.tsx b/packages/twenty-ui/src/display/chip/components/LinkChip.tsx index 51ab587a9..897c1adb1 100644 --- a/packages/twenty-ui/src/display/chip/components/LinkChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/LinkChip.tsx @@ -27,7 +27,6 @@ export const LinkChip = ({ to, size = ChipSize.Small, label, - isLabelHidden = false, variant = ChipVariant.Regular, leftComponent = null, rightComponent = null, @@ -41,7 +40,6 @@ export const LinkChip = ({