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