From 4a4ce9a6fe065d99b6924e04cf4c0fd04a14de09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 10 Apr 2025 11:29:45 +0200
Subject: [PATCH] Fix PageHeaderToggleCommandMenuButton (#11496)

This PR fixes a bug introduced by
https://github.com/twentyhq/twenty/pull/11470

Before:


https://github.com/user-attachments/assets/8c1b8114-591f-4b58-a177-551c4f0dfb98

After:


https://github.com/user-attachments/assets/b93aa498-2ae8-4001-b541-372866d24f54
---
 .../PageHeaderToggleCommandMenuButton.tsx     | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
index 6804f6b88..59da40d5b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
@@ -118,31 +118,30 @@ export const PageHeaderToggleCommandMenuButton = () => {
   const theme = useTheme();
 
   return (
-    <div>
-      <StyledButtonWrapper>
-        <div id="toggle-command-menu-button">
-          <AnimatedButton
-            animatedSvg={
-              <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
-            }
-            className="page-header-command-menu-button"
-            dataTestId="page-header-command-menu-button"
-            size={isMobile ? 'medium' : 'small'}
-            variant="secondary"
-            accent="default"
-            hotkeys={[getOsControlSymbol(), 'K']}
-            ariaLabel={ariaLabel}
-            onClick={toggleCommandMenu}
-            animate={{
-              rotate: isCommandMenuOpened ? 90 : 0,
-            }}
-            transition={{
-              duration: theme.animation.duration.normal,
-              ease: 'easeInOut',
-            }}
-          />
-        </div>
-      </StyledButtonWrapper>
+    <StyledButtonWrapper>
+      <div id="toggle-command-menu-button">
+        <AnimatedButton
+          animatedSvg={
+            <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
+          }
+          className="page-header-command-menu-button"
+          dataTestId="page-header-command-menu-button"
+          size={isMobile ? 'medium' : 'small'}
+          variant="secondary"
+          accent="default"
+          hotkeys={[getOsControlSymbol(), 'K']}
+          ariaLabel={ariaLabel}
+          onClick={toggleCommandMenu}
+          animate={{
+            rotate: isCommandMenuOpened ? 90 : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+            ease: 'easeInOut',
+          }}
+        />
+      </div>
+
       <StyledTooltipWrapper>
         <AppTooltip
           anchorSelect="#toggle-command-menu-button"
@@ -153,6 +152,6 @@ export const PageHeaderToggleCommandMenuButton = () => {
           noArrow
         />
       </StyledTooltipWrapper>
-    </div>
+    </StyledButtonWrapper>
   );
 };