fix: Misalignment and Excessive Padding in Relation Card (#8292)

## Description

- This PR solves the issue #8249 
- Maintained the overall padding, aligned content to left matching and
decreased Spacing between the card title and content should be smaller

## Changes

<img width="346" alt="Screenshot 2024-11-03 at 2 37 13 AM"
src="https://github.com/user-attachments/assets/91ba35bb-ff25-4001-af15-1fa10e5e1772">

---------

Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com>

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

@@ -12,6 +12,7 @@ export const StyledPropertyBoxContainer = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
   padding: ${({ 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/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx

@@ -62,6 +62,14 @@ const StyledListItem = styled(RecordDetailRecordsListItem)<{
   }
 `;
 
+const StyledPropertyBox = styled(PropertyBox)`
+  align-items: flex-start;
+  display: flex;
+  padding-left: ${({ theme }) => theme.spacing(0)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(0)};
+`;
+
 const StyledClickableZone = styled.div`
   align-items: center;
   cursor: pointer;
@@ -233,7 +241,7 @@ export const RecordDetailRelationRecordsListItem = ({
         )}
       </StyledListItem>
       <AnimatedEaseInOut isOpen={isExpanded}>
-        <PropertyBox>
+        <StyledPropertyBox>
           {availableRelationFieldMetadataItems.map(
             (fieldMetadataItem, index) => (
               <FieldContext.Provider
@@ -258,7 +266,7 @@ export const RecordDetailRelationRecordsListItem = ({
               </FieldContext.Provider>
             ),
           )}
-        </PropertyBox>
+        </StyledPropertyBox>
       </AnimatedEaseInOut>
     </>
   );