Added Side Panel compact header

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -155,6 +155,7 @@ export const RecordShowContainer = ({
 
   const summaryCard = isDefined(recordFromStore) ? (
     <ShowPageSummaryCard
+      isInRightDrawer={isInRightDrawer}
       id={objectRecordId}
       logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
       avatarPlaceholder={recordIdentifier?.name ?? ''}

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -40,6 +40,19 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
+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 = {
@@ -151,7 +164,6 @@ export const ShowPageRightContainer = ({
       hide: !shouldDisplayCalendarTab,
     },
   ];
-
   const renderActiveTabContent = () => {
     switch (activeTabId) {
       case 'timeline':
@@ -174,6 +186,7 @@ export const ShowPageRightContainer = ({
         );
       case 'fields':
         return fieldsBox;
+
       case 'tasks':
         return <ObjectTasks targetableObject={targetableObject} />;
       case 'notes':
@@ -188,18 +201,21 @@ export const ShowPageRightContainer = ({
         return <></>;
     }
   };
-
   return (
     <StyledShowPageRightContainer isMobile={isMobile}>
-      {summaryCard}
       <StyledTabListContainer>
         <TabList
           loading={loading}
           tabListId={`${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}`}
           tabs={tabs}
         />
       </StyledTabListContainer>
-      {renderActiveTabContent()}
+      {summaryCard}
+
+      <StyledFieldsBox isInRightDrawer={isInRightDrawer}>
+        {' '}
+        {renderActiveTabContent()}
+      </StyledFieldsBox>
     </StyledShowPageRightContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -20,40 +20,50 @@ type ShowPageSummaryCardProps = {
   onUploadPicture?: (file: File) => void;
   title: ReactNode;
   loading: boolean;
+  isInRightDrawer: boolean;
 };
 
-export const StyledShowPageSummaryCard = styled.div`
+export const StyledShowPageSummaryCard = styled.div<{
+  isInRightDrawer: boolean;
+}>`
   align-items: center;
   display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
-  justify-content: 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: 127px;
+  height: ${({ isInRightDrawer }) => (isInRightDrawer ? '77px' : '127px')};
+  box-sizing: border-box;
 `;
 
-const StyledInfoContainer = styled.div`
-  align-items: 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`
+const StyledDate = styled.div<{ isInRightDrawer: boolean }>`
   color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
+  padding-left: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.spacing(2) : 0};
 `;
 
-const StyledTitle = styled.div`
+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: center;
-
-  width: 100%;
+  justify-content: ${({ isInRightDrawer }) =>
+    isInRightDrawer ? 'flex-start' : 'center'};
+  width: ${({ isInRightDrawer }) => (isInRightDrawer ? '' : '100%')};
 `;
 
 const StyledAvatarWrapper = styled.div`
@@ -97,13 +107,13 @@ export const ShowPageSummaryCard = ({
   onUploadPicture,
   title,
   loading,
+  isInRightDrawer = false,
 }: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
   const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
   const dateElementId = `date-id-${uuidV4()}`;
   const inputFileRef = useRef<HTMLInputElement>(null);
-
   const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (isDefined(e.target.files)) onUploadPicture?.(e.target.files[0]);
   };
@@ -114,13 +124,13 @@ export const ShowPageSummaryCard = ({
 
   if (loading)
     return (
-      <StyledShowPageSummaryCard>
+      <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
         <StyledShowPageSummaryCardSkeletonLoader />
       </StyledShowPageSummaryCard>
     );
 
   return (
-    <StyledShowPageSummaryCard>
+    <StyledShowPageSummaryCard isInRightDrawer={isInRightDrawer}>
       <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
@@ -136,10 +146,10 @@ export const ShowPageSummaryCard = ({
           type="file"
         />
       </StyledAvatarWrapper>
-      <StyledInfoContainer>
-        <StyledTitle>{title}</StyledTitle>
+      <StyledInfoContainer isInRightDrawer={isInRightDrawer}>
+        <StyledTitle isInRightDrawer={isInRightDrawer}>{title}</StyledTitle>
         {beautifiedCreatedAt && (
-          <StyledDate id={dateElementId}>
+          <StyledDate isInRightDrawer={isInRightDrawer} id={dateElementId}>
             Added {beautifiedCreatedAt}
           </StyledDate>
         )}