From be106fe609e455032d15db400e3654c65f1f4132 Mon Sep 17 00:00:00 2001
From: Nitin Koche <nitinkoche03@gmail.com>
Date: Tue, 6 Aug 2024 21:53:42 +0530
Subject: [PATCH 1/4] compact header init

---
 .../components/RecordShowContainer.tsx        |  2 +
 .../components/ShowPageRightContainer.tsx     | 13 ++++--
 .../components/ShowPageSummaryCard.tsx        | 40 ++++++++++---------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index cd18516253b5..73b8ab7794f3 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -155,6 +155,7 @@ export const RecordShowContainer = ({
 
   const summaryCard = isDefined(recordFromStore) ? (
     <ShowPageSummaryCard
+      isCompact={isInRightDrawer}
       id={objectRecordId}
       logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
       avatarPlaceholder={recordIdentifier?.name ?? ''}
@@ -316,6 +317,7 @@ export const RecordShowContainer = ({
         emails
         isInRightDrawer={isInRightDrawer}
         summaryCard={isMobile ? summaryCard : <></>}
+        //introduce new summarycard for right container
         fieldsBox={fieldsBox}
         loading={isPrefetchLoading || loading || recordLoading}
       />
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index f35d34d0e617..76f1f51e6d7f 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -40,6 +40,9 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
+const StyledFieldsBox = styled.div`
+  //style fields acc to figma
+`;
 export const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
 
 type ShowPageRightContainerProps = {
@@ -151,7 +154,7 @@ export const ShowPageRightContainer = ({
       hide: !shouldDisplayCalendarTab,
     },
   ];
-
+  //this renders BlockEditor
   const renderActiveTabContent = () => {
     switch (activeTabId) {
       case 'timeline':
@@ -173,7 +176,8 @@ export const ShowPageRightContainer = ({
           )
         );
       case 'fields':
-        return fieldsBox;
+        return <StyledFieldsBox>{fieldsBox}</StyledFieldsBox>;
+
       case 'tasks':
         return <ObjectTasks targetableObject={targetableObject} />;
       case 'notes':
@@ -188,10 +192,9 @@ export const ShowPageRightContainer = ({
         return <></>;
     }
   };
-
+  //check if this is used for rightcontainer fields
   return (
     <StyledShowPageRightContainer isMobile={isMobile}>
-      {summaryCard}
       <StyledTabListContainer>
         <TabList
           loading={loading}
@@ -199,6 +202,8 @@ export const ShowPageRightContainer = ({
           tabs={tabs}
         />
       </StyledTabListContainer>
+      {summaryCard}
+
       {renderActiveTabContent()}
     </StyledShowPageRightContainer>
   );
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 6210bee93365..4a2156de0ad1 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
@@ -20,40 +20,43 @@ type ShowPageSummaryCardProps = {
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
   loading: boolean;
+  isCompact: boolean;
 };
 
-export const StyledShowPageSummaryCard = styled.div`
+export const StyledShowPageSummaryCard = styled.div<{ isCompact: boolean }>`
   align-items: center;
   display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
-  justify-content: center;
+  flex-direction: ${({ isCompact }) => (isCompact ? 'row' : 'column')};
+  gap: ${({ theme, isCompact }) =>
+    isCompact ? theme.spacing(2) : theme.spacing(3)};
+  justify-content: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
   padding: ${({ theme }) => theme.spacing(4)};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  height: 127px;
+  height: ${({ isCompact }) => (isCompact ? '77px' : '127px')};
+  box-sizing: border-box;
 `;
 
-const StyledInfoContainer = styled.div`
-  align-items: center;
+const StyledInfoContainer = styled.div<{ isCompact: boolean }>`
+  align-items: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 
-const StyledDate = styled.div`
+const StyledDate = styled.div<{ isCompact: boolean }>`
   color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
+  padding-left: ${({ theme, isCompact }) => (isCompact ? theme.spacing(2) : 0)};
 `;
 
-const StyledTitle = styled.div`
+const StyledTitle = styled.div<{ isCompact: boolean }>`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: center;
-
-  width: 100%;
+  justify-content: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
+  width: ${({ isCompact }) => (isCompact ? '' : '100%')};
 `;
 
 const StyledAvatarWrapper = styled.div`
@@ -97,13 +100,14 @@ export const ShowPageSummaryCard = ({
   onUploadPicture,
   title,
   loading,
+  isCompact = false,
 }: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
   const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
   const dateElementId = `date-id-${uuidV4()}`;
   const inputFileRef = useRef<HTMLInputElement>(null);
-
+  console.log(isCompact);
   const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (isDefined(e.target.files)) onUploadPicture?.(e.target.files[0]);
   };
@@ -114,13 +118,13 @@ export const ShowPageSummaryCard = ({
 
   if (loading)
     return (
-      <StyledShowPageSummaryCard>
+      <StyledShowPageSummaryCard isCompact={isCompact}>
         <StyledShowPageSummaryCardSkeletonLoader />
       </StyledShowPageSummaryCard>
     );
 
   return (
-    <StyledShowPageSummaryCard>
+    <StyledShowPageSummaryCard isCompact={isCompact}>
       <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
@@ -136,10 +140,10 @@ export const ShowPageSummaryCard = ({
           type="file"
         />
       </StyledAvatarWrapper>
-      <StyledInfoContainer>
-        <StyledTitle>{title}</StyledTitle>
+      <StyledInfoContainer isCompact={isCompact}>
+        <StyledTitle isCompact={isCompact}>{title}</StyledTitle>
         {beautifiedCreatedAt && (
-          <StyledDate id={dateElementId}>
+          <StyledDate isCompact={isCompact} id={dateElementId}>
             Added {beautifiedCreatedAt}
           </StyledDate>
         )}

From e54ac5206cabc722e720de3a4e9cdaed3cb35cba Mon Sep 17 00:00:00 2001
From: Nitin Koche <nitinkoche03@gmail.com>
Date: Tue, 6 Aug 2024 23:48:22 +0530
Subject: [PATCH 2/4] corrected styles according to figma

---
 .../components/RecordShowContainer.tsx        |  1 -
 .../components/ShowPageRightContainer.tsx     | 23 ++++++++++++++-----
 .../components/ShowPageSummaryCard.tsx        |  1 -
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 73b8ab7794f3..a84b355823b3 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -317,7 +317,6 @@ export const RecordShowContainer = ({
         emails
         isInRightDrawer={isInRightDrawer}
         summaryCard={isMobile ? summaryCard : <></>}
-        //introduce new summarycard for right container
         fieldsBox={fieldsBox}
         loading={isPrefetchLoading || loading || recordLoading}
       />
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 76f1f51e6d7f..3cc7f78fa9ae 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -40,9 +40,19 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
-const StyledFieldsBox = styled.div`
-  //style fields acc to figma
+const StyledFieldsBox = styled.div<{ isInRightDrawer: boolean }>`
+  background: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.background.secondary : ''};
+  border: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? `1px solid ${theme.border.color.medium}` : ''};
+  border-radius: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.border.radius.md : ''};
+  height: ${({ isInRightDrawer }) => (isInRightDrawer ? 'auto' : '100%')};
+
+  margin: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.spacing(4) : ''};
 `;
+
 export const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
 
 type ShowPageRightContainerProps = {
@@ -154,7 +164,6 @@ export const ShowPageRightContainer = ({
       hide: !shouldDisplayCalendarTab,
     },
   ];
-  //this renders BlockEditor
   const renderActiveTabContent = () => {
     switch (activeTabId) {
       case 'timeline':
@@ -176,7 +185,7 @@ export const ShowPageRightContainer = ({
           )
         );
       case 'fields':
-        return <StyledFieldsBox>{fieldsBox}</StyledFieldsBox>;
+        return fieldsBox;
 
       case 'tasks':
         return <ObjectTasks targetableObject={targetableObject} />;
@@ -192,7 +201,6 @@ export const ShowPageRightContainer = ({
         return <></>;
     }
   };
-  //check if this is used for rightcontainer fields
   return (
     <StyledShowPageRightContainer isMobile={isMobile}>
       <StyledTabListContainer>
@@ -204,7 +212,10 @@ export const ShowPageRightContainer = ({
       </StyledTabListContainer>
       {summaryCard}
 
-      {renderActiveTabContent()}
+      <StyledFieldsBox isInRightDrawer={isInRightDrawer}>
+        {' '}
+        {renderActiveTabContent()}
+      </StyledFieldsBox>
     </StyledShowPageRightContainer>
   );
 };
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 4a2156de0ad1..e013422d4ed8 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
@@ -107,7 +107,6 @@ export const ShowPageSummaryCard = ({
   const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
   const dateElementId = `date-id-${uuidV4()}`;
   const inputFileRef = useRef<HTMLInputElement>(null);
-  console.log(isCompact);
   const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (isDefined(e.target.files)) onUploadPicture?.(e.target.files[0]);
   };

From f51e510340ef6651a44f482c614cd77f98fa5909 Mon Sep 17 00:00:00 2001
From: Nitin Koche <nitinkoche03@gmail.com>
Date: Wed, 7 Aug 2024 00:03:05 +0530
Subject: [PATCH 3/4] code cleanup

---
 .../components/RecordShowContainer.tsx        |  2 +-
 .../components/ShowPageSummaryCard.tsx        | 47 +++++++++++--------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index a84b355823b3..e71c40639b9d 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -155,7 +155,7 @@ export const RecordShowContainer = ({
 
   const summaryCard = isDefined(recordFromStore) ? (
     <ShowPageSummaryCard
-      isCompact={isInRightDrawer}
+      isInRightDrawer={isInRightDrawer}
       id={objectRecordId}
       logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
       avatarPlaceholder={recordIdentifier?.name ?? ''}
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 e013422d4ed8..70b456816d82 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
@@ -20,43 +20,50 @@ type ShowPageSummaryCardProps = {
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
   loading: boolean;
-  isCompact: boolean;
+  isInRightDrawer: boolean;
 };
 
-export const StyledShowPageSummaryCard = styled.div<{ isCompact: boolean }>`
+export const StyledShowPageSummaryCard = styled.div<{
+  isInRightDrawer: boolean;
+}>`
   align-items: center;
   display: flex;
-  flex-direction: ${({ isCompact }) => (isCompact ? 'row' : 'column')};
-  gap: ${({ theme, isCompact }) =>
-    isCompact ? theme.spacing(2) : theme.spacing(3)};
-  justify-content: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
+  flex-direction: ${({ isInRightDrawer }) =>
+    isInRightDrawer ? 'row' : 'column'};
+  gap: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.spacing(2) : theme.spacing(3)};
+  justify-content: ${({ isInRightDrawer }) =>
+    isInRightDrawer ? 'flex-start' : 'center'};
   padding: ${({ theme }) => theme.spacing(4)};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  height: ${({ isCompact }) => (isCompact ? '77px' : '127px')};
+  height: ${({ isInRightDrawer }) => (isInRightDrawer ? '77px' : '127px')};
   box-sizing: border-box;
 `;
 
-const StyledInfoContainer = styled.div<{ isCompact: boolean }>`
-  align-items: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
+const StyledInfoContainer = styled.div<{ isInRightDrawer: boolean }>`
+  align-items: ${({ isInRightDrawer }) =>
+    isInRightDrawer ? 'flex-start' : 'center'};
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 
-const StyledDate = styled.div<{ isCompact: boolean }>`
+const StyledDate = styled.div<{ isInRightDrawer: boolean }>`
   color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
-  padding-left: ${({ theme, isCompact }) => (isCompact ? theme.spacing(2) : 0)};
+  padding-left: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.spacing(2) : 0};
 `;
 
-const StyledTitle = styled.div<{ isCompact: boolean }>`
+const StyledTitle = styled.div<{ isInRightDrawer: boolean }>`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: ${({ isCompact }) => (isCompact ? 'flex-start' : 'center')};
-  width: ${({ isCompact }) => (isCompact ? '' : '100%')};
+  justify-content: ${({ isInRightDrawer }) =>
+    isInRightDrawer ? 'flex-start' : 'center'};
+  width: ${({ isInRightDrawer }) => (isInRightDrawer ? '' : '100%')};
 `;
 
 const StyledAvatarWrapper = styled.div`
@@ -100,7 +107,7 @@ export const ShowPageSummaryCard = ({
   onUploadPicture,
   title,
   loading,
-  isCompact = false,
+  isInRightDrawer = false,
 }: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
@@ -117,13 +124,13 @@ export const ShowPageSummaryCard = ({
 
   if (loading)
     return (
-      <StyledShowPageSummaryCard isCompact={isCompact}>
+      <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
         <StyledShowPageSummaryCardSkeletonLoader />
       </StyledShowPageSummaryCard>
     );
 
   return (
-    <StyledShowPageSummaryCard isCompact={isCompact}>
+    <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
       <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
@@ -139,10 +146,10 @@ export const ShowPageSummaryCard = ({
           type="file"
         />
       </StyledAvatarWrapper>
-      <StyledInfoContainer isCompact={isCompact}>
-        <StyledTitle isCompact={isCompact}>{title}</StyledTitle>
+      <StyledInfoContainer isInRightDrawer={isInRightDrawer}>
+        <StyledTitle isInRightDrawer={isInRightDrawer}>{title}</StyledTitle>
         {beautifiedCreatedAt && (
-          <StyledDate isCompact={isCompact} id={dateElementId}>
+          <StyledDate isInRightDrawer={isInRightDrawer} id={dateElementId}>
             Added {beautifiedCreatedAt}
           </StyledDate>
         )}

From 37c8348706e813fb72b9ed265afbf76bbfddec2e Mon Sep 17 00:00:00 2001
From: Nitin Koche <nitinkoche03@gmail.com>
Date: Wed, 7 Aug 2024 17:51:37 +0530
Subject: [PATCH 4/4] changes acc to feedback

---
 .../files/components/Attachments.tsx          |  3 +-
 .../components/RecordShowContainer.tsx        |  4 +-
 .../ui/layout/page/ShowPageContainer.tsx      |  3 +-
 .../components/ShowPageRightContainer.tsx     | 15 ++++---
 .../components/ShowPageSummaryCard.tsx        | 45 +++++++++----------
 5 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
index 482b8e18f88f..c0bf6908e207 100644
--- a/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
@@ -1,5 +1,5 @@
-import { ChangeEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { ChangeEvent, useRef, useState } from 'react';
 import { IconPlus } from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
@@ -33,7 +33,6 @@ const StyledFileInput = styled.input`
 
 const StyledDropZoneContainer = styled.div`
   height: 100%;
-  padding: ${({ theme }) => theme.spacing(6)};
 `;
 
 export const Attachments = ({
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index d6d40c41fa9a..ae6a92be30c0 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -155,7 +155,7 @@ export const RecordShowContainer = ({
 
   const summaryCard = isDefined(recordFromStore) ? (
     <ShowPageSummaryCard
-      isInRightDrawer={isInRightDrawer}
+      isMobile={isMobile}
       id={objectRecordId}
       logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
       avatarPlaceholder={recordIdentifier?.name ?? ''}
@@ -302,7 +302,7 @@ export const RecordShowContainer = ({
 
   return (
     <ShowPageContainer>
-      <ShowPageLeftContainer forceMobile={isInRightDrawer}>
+      <ShowPageLeftContainer forceMobile={isMobile}>
         {!isMobile && summaryCard}
         {!isMobile && fieldsBox}
       </ShowPageLeftContainer>
diff --git a/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx
index ab9f308c5cd7..c241c44c0183 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/ShowPageContainer.tsx
@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
 import styled from '@emotion/styled';
+import { ReactElement } from 'react';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
@@ -16,6 +16,7 @@ const StyledInnerContainer = styled.div`
   display: flex;
   flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
   width: 100%;
+  height: 100%;
 `;
 
 const StyledScrollWrapper = styled(ScrollWrapper)`
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 3cc7f78fa9ae..96a129c122e5 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -29,6 +29,7 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   flex-direction: column;
   justify-content: start;
   width: 100%;
+  height: 100%;
 `;
 
 const StyledTabListContainer = styled.div`
@@ -40,7 +41,7 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
-const StyledFieldsBox = styled.div<{ isInRightDrawer: boolean }>`
+const StyledGreyBox = styled.div<{ isInRightDrawer: boolean }>`
   background: ${({ theme, isInRightDrawer }) =>
     isInRightDrawer ? theme.background.secondary : ''};
   border: ${({ isInRightDrawer, theme }) =>
@@ -185,7 +186,11 @@ export const ShowPageRightContainer = ({
           )
         );
       case 'fields':
-        return fieldsBox;
+        return (
+          <StyledGreyBox isInRightDrawer={isInRightDrawer}>
+            {fieldsBox}
+          </StyledGreyBox>
+        );
 
       case 'tasks':
         return <ObjectTasks targetableObject={targetableObject} />;
@@ -211,11 +216,7 @@ export const ShowPageRightContainer = ({
         />
       </StyledTabListContainer>
       {summaryCard}
-
-      <StyledFieldsBox isInRightDrawer={isInRightDrawer}>
-        {' '}
-        {renderActiveTabContent()}
-      </StyledFieldsBox>
+      {renderActiveTabContent()}
     </StyledShowPageRightContainer>
   );
 };
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 70b456816d82..3d228d5bd792 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
@@ -20,50 +20,45 @@ type ShowPageSummaryCardProps = {
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
   loading: boolean;
-  isInRightDrawer: boolean;
+  isMobile?: boolean;
 };
 
 export const StyledShowPageSummaryCard = styled.div<{
-  isInRightDrawer: boolean;
+  isMobile: boolean;
 }>`
   align-items: center;
   display: flex;
-  flex-direction: ${({ isInRightDrawer }) =>
-    isInRightDrawer ? 'row' : 'column'};
-  gap: ${({ theme, isInRightDrawer }) =>
-    isInRightDrawer ? theme.spacing(2) : theme.spacing(3)};
-  justify-content: ${({ isInRightDrawer }) =>
-    isInRightDrawer ? 'flex-start' : 'center'};
+  flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
+  gap: ${({ theme, isMobile }) =>
+    isMobile ? theme.spacing(2) : theme.spacing(3)};
+  justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
   padding: ${({ theme }) => theme.spacing(4)};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  height: ${({ isInRightDrawer }) => (isInRightDrawer ? '77px' : '127px')};
+  height: ${({ isMobile }) => (isMobile ? '77px' : '127px')};
   box-sizing: border-box;
 `;
 
-const StyledInfoContainer = styled.div<{ isInRightDrawer: boolean }>`
-  align-items: ${({ isInRightDrawer }) =>
-    isInRightDrawer ? 'flex-start' : 'center'};
+const StyledInfoContainer = styled.div<{ isMobile: boolean }>`
+  align-items: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 
-const StyledDate = styled.div<{ isInRightDrawer: boolean }>`
+const StyledDate = styled.div<{ isMobile: boolean }>`
   color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
-  padding-left: ${({ theme, isInRightDrawer }) =>
-    isInRightDrawer ? theme.spacing(2) : 0};
+  padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)};
 `;
 
-const StyledTitle = styled.div<{ isInRightDrawer: boolean }>`
+const StyledTitle = styled.div<{ isMobile: boolean }>`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: ${({ isInRightDrawer }) =>
-    isInRightDrawer ? 'flex-start' : 'center'};
-  width: ${({ isInRightDrawer }) => (isInRightDrawer ? '' : '100%')};
+  justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
+  width: ${({ isMobile }) => (isMobile ? '' : '100%')};
 `;
 
 const StyledAvatarWrapper = styled.div`
@@ -107,7 +102,7 @@ export const ShowPageSummaryCard = ({
   onUploadPicture,
   title,
   loading,
-  isInRightDrawer = false,
+  isMobile = false,
 }: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
@@ -124,13 +119,13 @@ export const ShowPageSummaryCard = ({
 
   if (loading)
     return (
-      <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
+      <StyledShowPageSummaryCard isMobile={isMobile}>
         <StyledShowPageSummaryCardSkeletonLoader />
       </StyledShowPageSummaryCard>
     );
 
   return (
-    <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
+    <StyledShowPageSummaryCard isMobile={isMobile}>
       <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
@@ -146,10 +141,10 @@ export const ShowPageSummaryCard = ({
           type="file"
         />
       </StyledAvatarWrapper>
-      <StyledInfoContainer isInRightDrawer={isInRightDrawer}>
-        <StyledTitle isInRightDrawer={isInRightDrawer}>{title}</StyledTitle>
+      <StyledInfoContainer isMobile={isMobile}>
+        <StyledTitle isMobile={isMobile}>{title}</StyledTitle>
         {beautifiedCreatedAt && (
-          <StyledDate isInRightDrawer={isInRightDrawer} id={dateElementId}>
+          <StyledDate isMobile={isMobile} id={dateElementId}>
             Added {beautifiedCreatedAt}
           </StyledDate>
         )}