diff --git a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts index 5409ede67d9b..e5b31be1cba8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts @@ -32,6 +32,7 @@ export type GenericFieldContextType = { isCentered?: boolean; overridenIsFieldEmpty?: boolean; displayedMaxRows?: number; + isDisplayModeFixHeight?: boolean; }; export const FieldContext = createContext( diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx index 8b58072b0d82..3ba58d994c30 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx @@ -27,7 +27,8 @@ type RecordInlineCellProps = { }; export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => { - const { fieldDefinition, recordId, isCentered } = useContext(FieldContext); + const { fieldDefinition, recordId, isCentered, isDisplayModeFixHeight } = + useContext(FieldContext); const buttonIcon = useGetButtonIcon(); const isFieldInputOnly = useIsFieldInputOnly(); @@ -101,7 +102,7 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => { /> ), displayModeContent: , - isDisplayModeFixHeight: undefined, + isDisplayModeFixHeight: isDisplayModeFixHeight, editModeContentOnly: isFieldInputOnly, loading: loading, }; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index c3f0ae951ef0..b93f1e73374d 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -1,9 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { ReactElement, useContext } from 'react'; +import { useContext } from 'react'; import { AppTooltip, - IconComponent, OverflowingTextWithTooltip, TooltipDelay, } from 'twenty-ui'; @@ -12,7 +11,6 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue'; import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; -import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata'; import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText'; @@ -56,13 +54,16 @@ const StyledLabelContainer = styled.div<{ width?: number }>` width: ${({ width }) => width}px; `; -const StyledInlineCellBaseContainer = styled.div` +const StyledInlineCellBaseContainer = styled.div<{ + isDisplayModeFixHeight?: boolean; +}>` align-items: flex-start; box-sizing: border-box; width: 100%; display: flex; height: fit-content; - line-height: 18px; + line-height: ${({ isDisplayModeFixHeight }) => + isDisplayModeFixHeight ? `24px` : `18px`}; gap: ${({ theme }) => theme.spacing(1)}; user-select: none; justify-content: center; @@ -72,25 +73,15 @@ export const StyledSkeletonDiv = styled.div` height: 24px; `; -export type RecordInlineCellContainerProps = { - readonly?: boolean; - IconLabel?: IconComponent; - label?: string; - labelWidth?: number; - showLabel?: boolean; - buttonIcon?: IconComponent; - editModeContent?: ReactElement; - editModeContentOnly?: boolean; - displayModeContent: ReactElement; - customEditHotkeyScope?: HotkeyScope; - isDisplayModeFixHeight?: boolean; - disableHoverEffect?: boolean; - loading?: boolean; -}; - export const RecordInlineCellContainer = () => { - const { readonly, IconLabel, label, labelWidth, showLabel } = - useRecordInlineCellContext(); + const { + readonly, + IconLabel, + label, + labelWidth, + showLabel, + isDisplayModeFixHeight, + } = useRecordInlineCellContext(); const { recordId, fieldDefinition } = useContext(FieldContext); @@ -120,6 +111,7 @@ export const RecordInlineCellContainer = () => { return ( diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx index d681cf19915b..44ae77c863a4 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx @@ -90,6 +90,7 @@ export const SummaryCard = ({ useUpdateRecord: useUpdateOneObjectRecordMutation, hotkeyScope: InlineCellHotkeyScope.InlineCell, isCentered: !isMobile, + isDisplayModeFixHeight: true, }} > {isInRightDrawer ? ( diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index 63f1243840f8..386bfda158b8 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -4,14 +4,15 @@ import { createPortal } from 'react-dom'; import { THEME_COMMON } from '@ui/theme'; +import { isDefined } from '@ui/utilities'; import { AppTooltip, TooltipDelay } from './AppTooltip'; const spacing4 = THEME_COMMON.spacing(4); -const StyledOverflowingText = styled.div<{ +const StyledOverflowingMultilineText = styled.div<{ cursorPointer: boolean; size: 'large' | 'small'; - displayedMaxRows?: number; + displayedMaxRows: number; }>` cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')}; font-family: inherit; @@ -23,14 +24,39 @@ const StyledOverflowingText = styled.div<{ text-decoration: inherit; text-overflow: ellipsis; - white-space: pre-wrap; height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')}; - text-wrap: wrap; -webkit-line-clamp: ${({ displayedMaxRows }) => - displayedMaxRows ? displayedMaxRows : '1'}; + displayedMaxRows ? displayedMaxRows.toString() : '1'}; display: -webkit-box; -webkit-box-orient: vertical; + white-space: pre-wrap; + + & :hover { + text-overflow: ${({ cursorPointer }) => + cursorPointer ? 'clip' : 'ellipsis'}; + white-space: ${({ cursorPointer }) => + cursorPointer ? 'normal' : 'nowrap'}; + } +`; + +const StyledOverflowingText = styled.div<{ + cursorPointer: boolean; + size: 'large' | 'small'; +}>` + cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')}; + font-family: inherit; + font-size: inherit; + + font-weight: inherit; + max-width: 100%; + overflow: hidden; + text-decoration: inherit; + + text-overflow: ellipsis; + height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')}; + + white-space: nowrap; & :hover { text-overflow: ${({ cursorPointer }) => @@ -82,18 +108,33 @@ export const OverflowingTextWithTooltip = ({ }; return ( <> - - {text} - + {isDefined(displayedMaxRows) && ( + + {text} + + )} + {!isDefined(displayedMaxRows) && ( + + {text} + + )} {isTitleOverflowing && createPortal(