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 bf997feeaa53..293c4856c39a 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 { TextDisplay } from '@/ui/field/display/components/TextDisplay'; +import { OverflowingTextWithTooltip } from 'twenty-ui'; 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/TextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx index 104216c5ce59..ce56ff7a6bb1 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 @@ -2,7 +2,7 @@ import { useTextFieldDisplay } from '@/object-record/record-field/meta-types/hoo import { TextDisplay } from '@/ui/field/display/components/TextDisplay'; export const TextFieldDisplay = () => { - const { fieldValue, maxWidth } = useTextFieldDisplay(); + const { fieldValue } = useTextFieldDisplay(); - return ; + return ; }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts index 5a137e2ac0a3..6a9be34eb0fb 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts @@ -5,8 +5,7 @@ import { useRecordFieldValue } from '@/object-record/record-store/contexts/Recor import { FieldContext } from '../../contexts/FieldContext'; export const useTextFieldDisplay = () => { - const { entityId, fieldDefinition, hotkeyScope, maxWidth } = - useContext(FieldContext); + const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext); const fieldName = fieldDefinition.metadata.fieldName; @@ -14,7 +13,6 @@ export const useTextFieldDisplay = () => { useRecordFieldValue(entityId, fieldName) ?? ''; return { - maxWidth, fieldDefinition, fieldValue, hotkeyScope, 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 f7927be24ece..a85c72ed37b1 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 @@ -18,11 +18,14 @@ import { RecordInlineCellContainer } from './RecordInlineCellContainer'; type RecordInlineCellProps = { readonly?: boolean; loading?: boolean; + isCentered?: boolean; }; +// TODO: refactor props drilling with a RecordInlineCellContext export const RecordInlineCell = ({ readonly, loading, + isCentered, }: RecordInlineCellProps) => { const { fieldDefinition, entityId } = useContext(FieldContext); const buttonIcon = useGetButtonIcon(); @@ -86,6 +89,7 @@ export const RecordInlineCell = ({ label={fieldDefinition.label} labelWidth={fieldDefinition.labelWidth} showLabel={fieldDefinition.showLabel} + isCentered={isCentered} editModeContent={ theme.spacing(1)}; user-select: none; + + justify-content: center; `; export const StyledSkeletonDiv = styled.div` @@ -72,8 +74,10 @@ export type RecordInlineCellContainerProps = { isDisplayModeFixHeight?: boolean; disableHoverEffect?: boolean; loading?: boolean; + isCentered?: boolean; }; +// TODO: refactor props drilling with a RecordInlineCellContext export const RecordInlineCellContainer = ({ readonly, IconLabel, @@ -88,6 +92,7 @@ export const RecordInlineCellContainer = ({ isDisplayModeFixHeight, disableHoverEffect, loading = false, + isCentered, }: RecordInlineCellContainerProps) => { const { entityId, fieldDefinition } = useContext(FieldContext); @@ -153,6 +158,7 @@ export const RecordInlineCellContainer = ({ loading, readonly, showLabel, + isCentered, }} /> diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx index 8bab022baf43..0bd0815cd4d4 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx @@ -1,7 +1,7 @@ -import { useContext } from 'react'; -import { createPortal } from 'react-dom'; import styled from '@emotion/styled'; import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'; +import { useContext } from 'react'; +import { createPortal } from 'react-dom'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; @@ -19,7 +19,8 @@ const StyledInlineCellInput = styled.div` display: flex; min-height: 32px; - min-width: 200px; + min-width: 320px; + width: inherit; z-index: 1000; @@ -29,6 +30,7 @@ type RecordInlineCellEditModeProps = { children: React.ReactNode; }; +// TODO: Refactor this to avoid setting absolute px values. export const RecordInlineCellEditMode = ({ children, }: RecordInlineCellEditModeProps) => { @@ -41,7 +43,8 @@ export const RecordInlineCellEditMode = ({ offset( isCentered ? { - mainAxis: -30, + mainAxis: -32, + crossAxis: 160, } : { crossAxis: -4, diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx index 152ef8927a1f..6ee1c3b5571b 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx @@ -8,11 +8,20 @@ import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/com import { RecordInlineCellSkeletonLoader } from '@/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader'; import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; -const StyledClickableContainer = styled.div<{ readonly?: boolean }>` +const StyledClickableContainer = styled.div<{ + readonly?: boolean; + isCentered?: boolean; +}>` display: flex; gap: ${({ theme }) => theme.spacing(1)}; width: 100%; + ${({ isCentered }) => + isCentered === true && + ` + justify-content: center; + `}; + ${({ readonly }) => !readonly && css` @@ -33,6 +42,7 @@ type RecordInlineCellValueProps = Pick< | 'loading' | 'showLabel' | 'label' + | 'isCentered' >; export const RecordInlineCellValue = ({ @@ -47,6 +57,7 @@ export const RecordInlineCellValue = ({ loading, showLabel, label, + isCentered, }: RecordInlineCellValueProps) => { const { isFocused } = useFieldFocus(); @@ -68,7 +79,7 @@ export const RecordInlineCellValue = ({ {editModeContent} )} {editModeContentOnly ? ( - + - + } avatarType={recordIdentifier?.avatarType ?? 'rounded'} 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 c29f7d85ab72..74f7f002df9f 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,14 +1,9 @@ import { OverflowingTextWithTooltip } from 'twenty-ui'; -import { EllipsisDisplay } from './EllipsisDisplay'; - type TextDisplayProps = { text: string; - maxWidth?: number; }; -export const TextDisplay = ({ text, maxWidth }: TextDisplayProps) => ( - - - +export const TextDisplay = ({ text }: TextDisplayProps) => ( + ); diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx index 48b4bc2596e6..c0e312a92184 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx @@ -1,3 +1,4 @@ +import styled from '@emotion/styled'; import { ChangeEvent, ClipboardEvent, @@ -5,7 +6,6 @@ import { useRef, useState, } from 'react'; -import styled from '@emotion/styled'; import { Key } from 'ts-key-enum'; import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText'; @@ -21,7 +21,7 @@ const StyledContainer = styled.div` justify-content: space-between; input { - width: ${({ theme }) => theme.spacing(24)}; + width: 100%; } & > input:last-child { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index 6a6b26cc591c..6210bee93365 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -52,6 +52,8 @@ const StyledTitle = styled.div` font-size: ${({ theme }) => theme.font.size.xl}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; justify-content: center; + + width: 100%; `; const StyledAvatarWrapper = styled.div`