diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx
index 3629109e6..bf997feea 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx
@@ -1,7 +1,7 @@
import { isNonEmptyString } from '@sniptt/guards';
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
export const FullNameFieldDisplay = () => {
const { fieldValue } = useFullNameFieldDisplay();
@@ -10,5 +10,5 @@ export const FullNameFieldDisplay = () => {
.filter(isNonEmptyString)
.join(' ');
- return ;
+ return ;
};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
index d024c2388..b5ebb3cbd 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
@@ -1,7 +1,7 @@
import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useNumberFieldDisplay';
import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay';
-import { formatNumber } from '~/utils/format/number';
import { isDefined } from 'twenty-shared/utils';
+import { formatNumber } from '~/utils/format/number';
export const NumberFieldDisplay = () => {
const { fieldValue, fieldDefinition } = useNumberFieldDisplay();
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx
index 7f67575fe..89a7c3ca2 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx
@@ -10,12 +10,11 @@ export const TextFieldDisplay = () => {
? fieldDefinition.metadata?.settings?.displayedMaxRows
: undefined;
+ const displayMaxRowCalculated = displayedMaxRows
+ ? displayedMaxRows
+ : displayedMaxRowsFromSettings;
+
return (
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
index 4dcc59c0b..2aa83decd 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
@@ -48,10 +48,16 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+
+ padding-top: 2px;
+ padding-bottom: 2px;
`;
const StyledEmptyField = styled.div`
color: ${({ theme }) => theme.font.color.light};
+ height: 20px;
+ display: flex;
+ align-items: center;
`;
export const RecordInlineCellDisplayMode = ({
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
index 32a08594e..31fd1db04 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
@@ -33,10 +33,9 @@ const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
export const RecordTitleCellSingleTextDisplayMode = () => {
const { recordId, fieldDefinition } = useContext(FieldContext);
-
const recordValue = useRecordValue(recordId);
const isEmpty =
- recordValue?.[fieldDefinition.metadata.fieldName].trim() === '';
+ recordValue?.[fieldDefinition.metadata.fieldName]?.trim() === '';
const { openInlineCell } = useInlineCell();
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
index d0ce25e1b..abfda56c5 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
@@ -13,19 +13,25 @@ type BooleanDisplayProps = {
value: boolean | null | undefined;
};
+const StyledContainer = styled.div`
+ height: 20px;
+ display: flex;
+ align-items: center;
+`;
+
export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
if (value === null || value === undefined) {
- return <>>;
+ return ;
}
const isTrue = value === true;
return (
- <>
+
{isTrue ? : }
{isTrue ? 'True' : 'False'}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
index ce8f93778..c21898b2a 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
@@ -1,26 +1,16 @@
import { useTheme } from '@emotion/react';
-import { styled } from '@linaria/react';
import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
+import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import { isDefined } from 'twenty-shared/utils';
import { formatAmount } from '~/utils/format/formatAmount';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { isDefined } from 'twenty-shared/utils';
type CurrencyDisplayProps = {
currencyValue: FieldCurrencyValue | null | undefined;
};
-const StyledEllipsisDisplay = styled.div`
- align-items: center;
- display: flex;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 100%;
-`;
-
export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
const theme = useTheme();
@@ -35,11 +25,11 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
: currencyValue?.amountMicros / 1000000;
if (!shouldDisplayCurrency) {
- return {0};
+ return {0};
}
return (
-
+
{isDefined(CurrencyIcon) && amountToDisplay !== null && (
<>
{
>
)}
{amountToDisplay !== null ? formatAmount(amountToDisplay) : ''}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx
index 1e909c6e6..c021149a1 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx
@@ -1,6 +1,9 @@
import { styled } from '@linaria/react';
const StyledEllipsisDisplay = styled.div<{ maxWidth?: number }>`
+ align-items: center;
+ display: flex;
+ height: 20px;
max-width: ${({ maxWidth }) => (maxWidth ? maxWidth + 'px' : '100%')};
overflow: hidden;
text-overflow: ellipsis;
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
index 0a0ffa8f9..57d10e813 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
@@ -1,3 +1,5 @@
+import { styled } from '@linaria/react';
+import { isUndefined } from '@sniptt/guards';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
type TextDisplayProps = {
@@ -5,12 +7,22 @@ type TextDisplayProps = {
displayedMaxRows?: number;
};
+const StyledContainer = styled.div<{ fixHeight: boolean }>`
+ height: ${({ fixHeight }) => (fixHeight ? '20px' : 'auto')};
+ display: flex;
+ align-items: center;
+`;
+
export const TextDisplay = ({ text, displayedMaxRows }: TextDisplayProps) => {
return (
-
+
+
+
);
};
diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index bccf83537..ce8cc95c1 100644
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -131,12 +131,15 @@ export default defineConfig(({ command, mode }) => {
'**/RecordTableTd.tsx',
'**/RecordTableHeaderDragDropColumn.tsx',
'**/ActorDisplay.tsx',
+ '**/BooleanDisplay.tsx',
+ '**/CurrencyDisplay.tsx',
+ '**/TextDisplay.tsx',
+ '**/EllipsisDisplay.tsx',
'**/AvatarChip.tsx',
'**/URLDisplay.tsx',
'**/EmailsDisplay.tsx',
'**/PhonesDisplay.tsx',
'**/MultiSelectDisplay.tsx',
-
],
babelOptions: {
presets: ['@babel/preset-typescript', '@babel/preset-react'],