From d44f7a46b60d874e2e0f89b8b9138bedfb26e7cd Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:40:15 +0530
Subject: [PATCH] fix: Misalignment and Excessive Padding in Relation Card 
 (#8292)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../property-box/components/PropertyBox.tsx          |  1 +
 .../RecordDetailRelationRecordsListItem.tsx          | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
index 2750351e51f3..6da09af2032a 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
+++ b/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) => (
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
index 899c0ddd39a6..3d51e9d3823d 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
+++ b/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>
     </>
   );