Various design fixes on side panel (#11165)

- Fix background color
- Fix Menu Item height
- Fix Input design
- Fix show page summary card design

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx

@@ -36,8 +36,8 @@ export const RecordTitleCell = ({
   );
 
   const handleEnter: FieldInputEvent = (persistField) => {
-    persistField();
     closeInlineCell();
+    persistField();
   };
 
   const handleEscape = () => {
@@ -45,13 +45,13 @@ export const RecordTitleCell = ({
   };
 
   const handleTab: FieldInputEvent = (persistField) => {
-    persistField();
     closeInlineCell();
+    persistField();
   };
 
   const handleShiftTab: FieldInputEvent = (persistField) => {
-    persistField();
     closeInlineCell();
+    persistField();
   };
 
   const handleClickOutside: FieldInputClickOutsideEvent = (
@@ -59,9 +59,8 @@ export const RecordTitleCell = ({
     event,
   ) => {
     event.stopImmediatePropagation();
-
-    persistField();
     closeInlineCell();
+    persistField();
   };
 
   const recordTitleCellContextValue: RecordTitleCellContextProps = {

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx

@@ -6,7 +6,6 @@ import { useContext } from 'react';
 import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 const StyledDiv = styled.div`
-  align-items: center;
   background: inherit;
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -14,7 +13,11 @@ const StyledDiv = styled.div`
   cursor: pointer;
   overflow: hidden;
   height: 28px;
-  line-height: 28px;
+  padding: ${({ theme }) => theme.spacing(0, 1.25)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   :hover {
     background: ${({ theme }) => theme.background.transparent.light};
   }

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx

@@ -15,7 +15,11 @@ const StyledDiv = styled.div`
   cursor: pointer;
   overflow: hidden;
   height: 28px;
-  line-height: 28px;
+  padding: ${({ theme }) => theme.spacing(0, 1.25)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   :hover {
     background: ${({ theme }) => theme.background.transparent.light};
   }