Fix-inline-height (#11608)

Follow up from inline height #11553 related to PR #11442


we had some issues with hover styles

Fixes
https://github.com/twentyhq/twenty/issues/11442#issuecomment-2805893663

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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 <OverflowingTextWithTooltip text={content} />;
+  return <TextDisplay text={content} />;
 };

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();

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 (
-    <TextDisplay
+    <TextDisplay text={fieldValue} displayedMaxRows={displayMaxRowCalculated} />
-      text={fieldValue}
-      displayedMaxRows={
-        displayedMaxRows ? displayedMaxRows : displayedMaxRowsFromSettings
-      }
-    />
   );
 };

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

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();
 

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 <StyledContainer />;
   }
 
   const isTrue = value === true;
 
   return (
-    <>
+    <StyledContainer>
       {isTrue ? <IconCheck size={iconSizeSm} /> : <IconX size={iconSizeSm} />}
       <StyledBooleanFieldValue>
         {isTrue ? 'True' : 'False'}
       </StyledBooleanFieldValue>
-    </>
+    </StyledContainer>
   );
 };

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 <StyledEllipsisDisplay>{0}</StyledEllipsisDisplay>;
+    return <EllipsisDisplay>{0}</EllipsisDisplay>;
   }
 
   return (
-    <StyledEllipsisDisplay>
+    <EllipsisDisplay>
       {isDefined(CurrencyIcon) && amountToDisplay !== null && (
         <>
           <CurrencyIcon
@@ -50,6 +40,6 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
         </>
       )}
       {amountToDisplay !== null ? formatAmount(amountToDisplay) : ''}
-    </StyledEllipsisDisplay>
+    </EllipsisDisplay>
   );
 };

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;

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 (
-    <OverflowingTextWithTooltip
+    <StyledContainer
-      text={text}
+      fixHeight={isUndefined(displayedMaxRows) || displayedMaxRows === 1}
-      displayedMaxRows={displayedMaxRows}
+    >
-      isTooltipMultiline={true}
+      <OverflowingTextWithTooltip
-    />
+        text={text}
+        displayedMaxRows={displayedMaxRows}
+        isTooltipMultiline={true}
+      />
+    </StyledContainer>
   );
 };

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'],