Added Side Panel compact header (#6560)

Fixes issue #6487 
Added a new prop, `isInRightDrawer` to both the `ShowPageSummaryCard`
and `ShowPageRightContainer` components. This prop allows for different
styles to be applied based on the specific needs of the drawer..

Rather than creating a new component, I opted to add this prop to avoid
code duplication. However, if you would prefer a separate component for
this functionality, I'm happy to make that adjustment—please just let me
know!

Also added `box-sizing: border-box` to `ShowPageSummaryCard` to make
sure it aligns with figma designs.



https://github.com/user-attachments/assets/38e8d85e-55d5-471e-884a-11c67467f56f

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,6 +41,19 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
+const StyledGreyBox = 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 +165,6 @@ export const ShowPageRightContainer = ({
       hide: !shouldDisplayCalendarTab,
     },
   ];
-
   const renderActiveTabContent = () => {
     switch (activeTabId) {
       case 'timeline':
@@ -173,7 +186,12 @@ export const ShowPageRightContainer = ({
           )
         );
       case 'fields':
-        return fieldsBox;
+        return (
+          <StyledGreyBox isInRightDrawer={isInRightDrawer}>
+            {fieldsBox}
+          </StyledGreyBox>
+        );
+
       case 'tasks':
         return <ObjectTasks targetableObject={targetableObject} />;
       case 'notes':
@@ -188,10 +206,8 @@ export const ShowPageRightContainer = ({
         return <></>;
     }
   };
-
   return (
     <StyledShowPageRightContainer isMobile={isMobile}>
-      {summaryCard}
       <StyledTabListContainer>
         <TabList
           loading={loading}
@@ -199,6 +215,7 @@ export const ShowPageRightContainer = ({
           tabs={tabs}
         />
       </StyledTabListContainer>
+      {summaryCard}
       {renderActiveTabContent()}
     </StyledShowPageRightContainer>
   );