From 3eb1aa1b5a7de444ac75f7755b54224e4d1155c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 12 Mar 2025 17:46:07 +0100
Subject: [PATCH] Fix alignment and background icon color on record page header
 (#10817)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
<img width="501" alt="Capture d’écran 2025-03-12 à 17 23 58"
src="https://github.com/user-attachments/assets/b9f58bc1-61e5-4a6b-905d-76eeb63f88be"
/>

After:
<img width="499" alt="Capture d’écran 2025-03-12 à 17 22 12"
src="https://github.com/user-attachments/assets/30c95603-77e9-4647-b233-8c0ea2a27df8"
/>
---
 .../show-page/components/ShowPageSummaryCard.tsx   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
index 9591c0a77..477ff4635 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
@@ -62,10 +62,17 @@ const StyledTitle = styled.div<{ isMobile: boolean }>`
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
+  padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)};
   width: 90%;
 `;
 
-const StyledAvatarWrapper = styled.div<{ isAvatarEditable: boolean }>`
+const StyledAvatarWrapper = styled.div<{
+  isAvatarEditable: boolean;
+  hasIcon: boolean;
+}>`
+  background-color: ${({ theme, hasIcon }) =>
+    hasIcon ? theme.background.transparent.light : 'unset'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
   cursor: ${({ isAvatarEditable }) =>
     isAvatarEditable ? 'pointer' : 'default'};
 `;
@@ -133,7 +140,10 @@ export const ShowPageSummaryCard = ({
 
   return (
     <StyledShowPageSummaryCard isMobile={isMobile}>
-      <StyledAvatarWrapper isAvatarEditable={!!onUploadPicture}>
+      <StyledAvatarWrapper
+        isAvatarEditable={isDefined(onUploadPicture)}
+        hasIcon={isDefined(icon)}
+      >
         <Avatar
           avatarUrl={logoOrAvatar}
           onClick={onUploadPicture ? handleAvatarClick : undefined}