Add suggested values for variable dropdown (#9437)

<img width="378" alt="Capture d’écran 2025-01-07 à 15 37 20"
src="https://github.com/user-attachments/assets/c15abcac-684a-4c3b-ad12-62cf91afe927"
/>

Here is a first version:
- simple fields have a suggested value
- composite do not, but sub values of composite do
- json, arrays or complex values do not

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx

@@ -47,6 +47,7 @@ type MenuItemSelectProps = {
   disabled?: boolean;
   hovered?: boolean;
   hasSubMenu?: boolean;
+  contextualText?: string;
 };
 
 export const MenuItemSelect = ({
@@ -59,6 +60,7 @@ export const MenuItemSelect = ({
   disabled,
   hovered,
   hasSubMenu = false,
+  contextualText,
 }: MenuItemSelectProps) => {
   const theme = useTheme();
 
@@ -73,8 +75,13 @@ export const MenuItemSelect = ({
       aria-selected={selected}
       aria-disabled={disabled}
     >
-      <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
+      <MenuItemLeftContent
+        LeftIcon={LeftIcon}
+        text={text}
+        contextualText={contextualText}
+      />
       {selected && needIconCheck && <IconCheck size={theme.icon.size.md} />}
+
       {hasSubMenu && (
         <IconChevronRight
           size={theme.icon.size.sm}

packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -14,6 +14,10 @@ import {
   StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
 
+const StyledMainText = styled.div`
+  flex-shrink: 0;
+`;
+
 const StyledContextualText = styled.div`
   color: ${({ theme }) => theme.color.gray35};
   font-family: inherit;
@@ -29,6 +33,7 @@ const StyledContextualText = styled.div`
   white-space: nowrap;
 
   padding-left: ${({ theme }) => theme.spacing(1)};
+  flex-shrink: 1;
 `;
 
 type MenuItemLeftContentProps = {
@@ -67,7 +72,13 @@ export const MenuItemLeftContent = ({
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
       <StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
-        {isString(text) ? <OverflowingTextWithTooltip text={text} /> : text}
+        {isString(text) ? (
+          <StyledMainText>
+            <OverflowingTextWithTooltip text={text} />
+          </StyledMainText>
+        ) : (
+          text
+        )}
         {isString(contextualText) ? (
           <StyledContextualText>{`· ${contextualText}`}</StyledContextualText>
         ) : (