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 1e38d25140..f62b0e6dfa 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
@@ -41,26 +41,16 @@ const StyledLabelAndIconContainer = styled.div`
height: 24px;
`;
-const StyledValueContainer = styled.div<{ readonly: boolean }>`
+const StyledValueContainer = styled.div<{
+ readonly: boolean;
+}>`
display: flex;
min-width: 0;
position: relative;
width: 100%;
- &:hover {
- ${({ readonly, theme }) =>
- readonly &&
- `
- border-radius: ${theme.border.radius.sm};
-
- ${StyledIconContainer}, ${StyledLabelContainer} {
- color: ${theme.font.color.secondary};
- }
-
- img {
- opacity: 0.64;
- }
- `}
+ &:hover .record-inline-cell-value-display {
+ opacity: 0;
}
`;
@@ -152,7 +142,7 @@ export const RecordInlineCellContainer = () => {
)}
-
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
index 7bc66e7dae..8507f8cb93 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
@@ -13,12 +13,12 @@ import { useLingui } from '@lingui/react/macro';
const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
Pick<
RecordInlineCellContextProps,
- 'isDisplayModeFixHeight' | 'disableHoverEffect'
+ 'isDisplayModeFixHeight' | 'disableHoverEffect' | 'readonly'
> & { isHovered?: boolean }
>`
outline: 1px solid
- ${({ theme, isHovered }) =>
- isHovered ? theme.border.color.medium : 'transparent'};
+ ${({ theme, isHovered, readonly }) =>
+ isHovered && readonly ? theme.border.color.medium : 'transparent'};
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
@@ -29,7 +29,7 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
${(props) => {
- if (props.isHovered === true) {
+ if (props.isHovered === true && !props.readonly) {
return css`
background-color: ${!props.disableHoverEffect
? props.theme.background.transparent.light
@@ -72,13 +72,14 @@ export const RecordInlineCellDisplayMode = ({
}>) => {
const { t } = useLingui();
- const { editModeContentOnly, showLabel, label, buttonIcon } =
+ const { editModeContentOnly, showLabel, label, buttonIcon, readonly } =
useRecordInlineCellContext();
const isDisplayModeContentEmpty = useIsFieldEmpty();
const showEditButton =
buttonIcon &&
isHovered &&
+ !readonly &&
!isDisplayModeContentEmpty &&
!editModeContentOnly;
@@ -92,6 +93,7 @@ export const RecordInlineCellDisplayMode = ({
<>
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 94719c5036..a9c6d72d6a 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
@@ -28,7 +28,13 @@ const StyledClickableContainer = styled.div<{
`};
`;
-export const RecordInlineCellValue = () => {
+type RecordInlineCellValueProps = {
+ className?: string;
+};
+
+export const RecordInlineCellValue = ({
+ className,
+}: RecordInlineCellValueProps) => {
const { readonly, loading, isCentered } = useRecordInlineCellContext();
if (loading === true) {
@@ -36,7 +42,11 @@ export const RecordInlineCellValue = () => {
}
return (
-
+