From dae999ca8d9d7d499878b65abe27d05db31e4e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix@twenty.com>
Date: Sun, 7 Jun 2026 15:32:19 +0200
Subject: [PATCH] fix(twenty-front): restore the pinned create button and scope
 the primary to one action

- The header's right group now grows instead of sizing to content, so the
  pinned-buttons inline layout keeps its width and New Company no longer
  collapses into a hidden overflow.
- Only the leading pinned action renders as primary, threaded through an
  isPrimaryAction prop and applied to both the text and icon button paths,
  instead of hardcoding every pinned button to primary.
---
 .../components/CommandMenuItemRenderer.tsx      | 17 ++++++++++++++---
 .../components/PinnedCommandMenuItemButtons.tsx |  7 +++++--
 .../components/CommandMenuButton.tsx            |  4 ++--
 .../layout/page/components/PageCardHeader.tsx   |  4 ++--
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu-item/display/components/CommandMenuItemRenderer.tsx b/packages/twenty-front/src/modules/command-menu-item/display/components/CommandMenuItemRenderer.tsx
index e756d741616..85d40f61017 100644
--- a/packages/twenty-front/src/modules/command-menu-item/display/components/CommandMenuItemRenderer.tsx
+++ b/packages/twenty-front/src/modules/command-menu-item/display/components/CommandMenuItemRenderer.tsx
@@ -31,12 +31,14 @@ const StyledPreviewWrapper = styled.div`
 
 type CommandMenuItemRendererProps = {
   item: CommandMenuItemFieldsFragment;
+  isPrimaryAction?: boolean;
 };
 
 type CommandMenuItemButtonRendererProps = CommandMenuItemRendererProps;
 
 const CommandMenuItemButtonRenderer = ({
   item,
+  isPrimaryAction = false,
 }: CommandMenuItemButtonRendererProps) => {
   const { commandMenuContextApi, isInPreviewMode } =
     useContext(CommandMenuContext);
@@ -60,7 +62,10 @@ const CommandMenuItemButtonRenderer = ({
   if (isInPreviewMode) {
     return (
       <StyledPreviewWrapper>
-        <CommandMenuButton command={command} isPrimaryAction />
+        <CommandMenuButton
+          command={command}
+          isPrimaryAction={isPrimaryAction}
+        />
       </StyledPreviewWrapper>
     );
   }
@@ -70,7 +75,7 @@ const CommandMenuItemButtonRenderer = ({
       command={command}
       onClick={disabled ? undefined : handleClick}
       disabled={disabled}
-      isPrimaryAction
+      isPrimaryAction={isPrimaryAction}
     />
   );
 };
@@ -168,11 +173,17 @@ const CommandMenuItemSelectableRenderer = ({
 // oxlint-disable-next-line twenty/effect-components
 export const CommandMenuItemRenderer = ({
   item,
+  isPrimaryAction,
 }: CommandMenuItemRendererProps) => {
   const { displayType } = useContext(CommandMenuContext);
 
   if (displayType === 'button') {
-    return <CommandMenuItemButtonRenderer item={item} />;
+    return (
+      <CommandMenuItemButtonRenderer
+        item={item}
+        isPrimaryAction={isPrimaryAction}
+      />
+    );
   }
 
   if (displayType === 'listItem' || displayType === 'dropdownItem') {
diff --git a/packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx b/packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx
index eaf9a9fd8c5..cc518c49d3d 100644
--- a/packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx
+++ b/packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx
@@ -68,7 +68,7 @@ export const PinnedCommandMenuItemButtons = () => {
         <NodeDimension onDimensionChange={onContainerDimensionChange}>
           <StyledContainer>
             <StyledItemsContainer>
-              {pinnedInlineCommandMenuItems.map((item) => (
+              {pinnedInlineCommandMenuItems.map((item, index) => (
                 <StyledCommandMenuItemContainer
                   key={item.id}
                   layout
@@ -80,7 +80,10 @@ export const PinnedCommandMenuItemButtons = () => {
                     ease: 'easeInOut',
                   }}
                 >
-                  <CommandMenuItemRenderer item={item} />
+                  <CommandMenuItemRenderer
+                    item={item}
+                    isPrimaryAction={index === 0}
+                  />
                 </StyledCommandMenuItemContainer>
               ))}
             </StyledItemsContainer>
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuButton.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuButton.tsx
index f51b65a811e..a465662b9ca 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuButton.tsx
@@ -65,8 +65,8 @@ export const CommandMenuButton = ({
           <IconButton
             Icon={command.Icon}
             size="small"
-            variant="secondary"
-            accent={buttonAccent}
+            variant={isPrimaryAction ? 'primary' : 'secondary'}
+            accent={isPrimaryAction ? 'blue' : buttonAccent}
             to={to}
             onClick={onClick}
             disabled={disabled}
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
index 159ccde3a61..7b81a8bb1e8 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx
@@ -27,7 +27,6 @@ const StyledHeader = styled.div`
   box-sizing: border-box;
   display: flex;
   gap: ${themeCssVariables.spacing[2]};
-  justify-content: space-between;
   min-height: ${SIDE_PANEL_TOP_BAR_HEIGHT}px;
   padding: 0 ${themeCssVariables.spacing[3]};
   width: 100%;
@@ -54,9 +53,10 @@ const StyledTitle = styled.div`
 const StyledRight = styled.div`
   align-items: center;
   display: flex;
-  flex-shrink: 0;
+  flex: 1;
   gap: ${themeCssVariables.spacing[2]};
   justify-content: flex-end;
+  min-width: 0;
 `;
 
 export const PageCardHeader = ({