Fix title cell (#14025)

packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx

@@ -14,6 +14,8 @@ const StyledHeader = styled.header<{
   isDropdownOpen?: boolean;
   areRecordsAvailable?: boolean;
 }>`
+  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   align-items: center;
   justify-content: space-between;
   display: flex;

packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/RecordDetailRelationRecordsListItem.tsx

@@ -55,6 +55,9 @@ const StyledListItem = styled(RecordDetailRecordsListItemContainer)<{
       }
     `}
 
+  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+
   &:hover {
     .displayOnHover {
       opacity: 1;
@@ -252,6 +255,7 @@ export const RecordDetailRelationRecordsListItem = ({
           objectNameSingular={relationObjectMetadataNameSingular}
           objectRecordId={relationRecord.id}
           showDuplicatesSection={false}
+          showRelationSections={false}
           excludeCreatedAtAndUpdatedAt={true}
           excludeFieldMetadataIds={[relationFieldMetadataId]}
         />

packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx

@@ -5,7 +5,7 @@ interface PropertyBoxProps {
   className?: string;
 }
 
-export const StyledPropertyBoxContainer = styled.div`
+const StyledPropertyBoxContainer = styled.div`
   align-self: stretch;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
@@ -13,6 +13,8 @@ export const StyledPropertyBoxContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   padding-top: ${({ theme }) => theme.spacing(3)};
   padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const PropertyBox = ({ children, className }: PropertyBoxProps) => (

packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx

@@ -1,11 +1,5 @@
 import { RecordFieldList } from '@/object-record/record-field-list/components/RecordFieldList';
 import { useIsInRightDrawerOrThrow } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
-import styled from '@emotion/styled';
-
-const StyledPropertyBoxContainer = styled.div`
-  padding: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-`;
 
 type FieldsCardProps = {
   objectNameSingular: string;
@@ -21,13 +15,11 @@ export const FieldsCard = ({
   const { isInRightDrawer } = useIsInRightDrawerOrThrow();
 
   return (
-    <StyledPropertyBoxContainer>
-      <RecordFieldList
-        instanceId={`fields-card-${objectRecordId}-${isInRightDrawer ? 'right-drawer' : ''}`}
-        objectNameSingular={objectNameSingular}
-        objectRecordId={objectRecordId}
-        showDuplicatesSection={showDuplicatesSection}
-      />
-    </StyledPropertyBoxContainer>
+    <RecordFieldList
+      instanceId={`fields-card-${objectRecordId}-${isInRightDrawer ? 'right-drawer' : ''}`}
+      objectNameSingular={objectNameSingular}
+      objectRecordId={objectRecordId}
+      showDuplicatesSection={showDuplicatesSection}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx

@@ -43,8 +43,19 @@ export const RecordTitleCell = ({
   const { closeRecordTitleCell } = useRecordTitleCell();
 
   const closeCell = useCallback(() => {
-    closeRecordTitleCell();
-  }, [closeRecordTitleCell]);
+    closeRecordTitleCell(
+      getRecordFieldInputInstanceId({
+        recordId,
+        fieldName: fieldDefinition.metadata.fieldName,
+        prefix: containerType,
+      }),
+    );
+  }, [
+    closeRecordTitleCell,
+    containerType,
+    fieldDefinition.metadata.fieldName,
+    recordId,
+  ]);
 
   const { persistFieldFromFieldInputContext } =
     usePersistFieldFromFieldInputContext();

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx

@@ -1,6 +1,6 @@
 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { useFullNameFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useFullNameFieldDisplay';
-import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { useRecordTitleCell } from '@/object-record/record-title-cell/hooks/useRecordTitleCell';
 import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -40,7 +40,7 @@ export const RecordTitleFullNameFieldDisplay = ({
 }) => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
-  const { openInlineCell } = useInlineCell();
+  const { openRecordTitleCell } = useRecordTitleCell();
 
   const { fieldValue } = useFullNameFieldDisplay();
 
@@ -71,7 +71,15 @@ export const RecordTitleFullNameFieldDisplay = ({
           },
         });
 
-        openInlineCell();
+        openRecordTitleCell({
+          recordId,
+          fieldName: fieldDefinition.metadata.fieldName,
+          instanceId: getRecordFieldInputInstanceId({
+            recordId,
+            fieldName: fieldDefinition.metadata.fieldName,
+            prefix: containerType,
+          }),
+        });
       }}
     >
       {!content ? (