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 bbc54d04f..e4c29daa4 100644
--- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
@@ -22,6 +22,7 @@ export type RecordChipProps = {
maxWidth?: number;
to?: string | undefined;
size?: ChipSize;
+ isLabelHidden?: boolean;
};
export const RecordChip = ({
@@ -33,6 +34,7 @@ export const RecordChip = ({
to,
size,
forceDisableClick = false,
+ isLabelHidden = false,
}: RecordChipProps) => {
const { recordChipData } = useRecordChipData({
objectNameSingular,
@@ -76,6 +78,7 @@ 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 285c0217d..27c8c02d7 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,4 +1,5 @@
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';
@@ -7,6 +8,8 @@ export const ChipFieldDisplay = () => {
const { recordValue, objectNameSingular, labelIdentifierLink } =
useChipFieldDisplay();
+ const isChipFieldDisplayLabelHidden = useIsChipFieldDisplayLabelHidden();
+
if (!isDefined(recordValue)) {
return null;
}
@@ -17,6 +20,7 @@ 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 bc2964a29..688b64dcf 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,6 +5,7 @@ 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';
@@ -22,18 +23,25 @@ const meta: Meta = {
)!;
return (
- '',
- onIndexRecordsLoaded: () => {},
- objectNamePlural: CoreObjectNamePlural.Company,
- objectNameSingular: CoreObjectNameSingular.Company,
- objectMetadataItem: companyObjectMetadataItem,
- recordIndexId: instanceId,
+ instanceId,
+ onColumnsChange: () => {},
}}
>
-
-
+ '',
+ 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
new file mode 100644
index 000000000..fc042c702
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts
@@ -0,0 +1,22 @@
+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 26b1fa747..8022cce69 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,5 +1,4 @@
import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledTbody = styled.tbody`
&.first-columns-sticky {
@@ -22,18 +21,6 @@ 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 bce1d6476..84b3002a1 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 } from 'twenty-ui';
+import { IconArrowUpRight, useIsMobile } from 'twenty-ui';
import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
@@ -80,8 +80,12 @@ export const RecordTableCellSoftFocusMode = ({
? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now
: customButtonIcon;
+ const isMobile = useIsMobile();
const showButton =
- isDefined(buttonIcon) && !editModeContentOnly && !isFieldReadOnly;
+ isDefined(buttonIcon) &&
+ !editModeContentOnly &&
+ !isFieldReadOnly &&
+ !(isMobile && isFirstColumn);
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 2a7edc484..07f7c4225 100644
--- a/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx
+++ b/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx
@@ -8,6 +8,7 @@ export type LinkAvatarChipProps = Omit & {
to: string;
onClick?: LinkChipProps['onClick'];
variant?: AvatarChipVariant;
+ isLabelHidden?: boolean;
};
export const LinkAvatarChip = ({
@@ -24,11 +25,13 @@ 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 29d0516df..4f471479e 100644
--- a/packages/twenty-ui/src/display/chip/components/Chip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx
@@ -26,6 +26,7 @@ export type ChipProps = {
disabled?: boolean;
clickable?: boolean;
label: string;
+ isLabelHidden?: boolean;
maxWidth?: number;
variant?: ChipVariant;
accent?: ChipAccent;
@@ -124,6 +125,7 @@ const StyledContainer = withTheme(styled.div<
export const Chip = ({
size = ChipSize.Small,
label,
+ isLabelHidden = false,
disabled = false,
clickable = true,
variant = ChipVariant.Regular,
@@ -145,7 +147,9 @@ 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 897c1adb1..51ab587a9 100644
--- a/packages/twenty-ui/src/display/chip/components/LinkChip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/LinkChip.tsx
@@ -27,6 +27,7 @@ export const LinkChip = ({
to,
size = ChipSize.Small,
label,
+ isLabelHidden = false,
variant = ChipVariant.Regular,
leftComponent = null,
rightComponent = null,
@@ -40,6 +41,7 @@ export const LinkChip = ({