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 = ({