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`