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 <[email protected]>
twentyhq · Nov 8, 2024 · d44f7a4 · d44f7a4
1 parent 61cdc0e
commit d44f7a4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/...ront/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/...ront/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/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/...cord/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>
     </>
   );