From 85d94822b342694337cdf3f3a6845475cc232bf2 Mon Sep 17 00:00:00 2001
From: Murali Singh <68021313+muraliSingh7@users.noreply.github.com>
Date: Mon, 14 Apr 2025 17:42:15 +0530
Subject: [PATCH] Fix the Command menu items right padding #11484 (#11489)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Screenshot:
![Screenshot 2025-04-10 at 1 07
24 AM](https://github.com/user-attachments/assets/1e7ed8e7-594f-4ead-9b04-0c7dab636fbd)

---------

Co-authored-by: guillim <guigloo@msn.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../src/modules/command-menu/components/CommandGroup.tsx   | 2 +-
 .../navigation/menu-item/components/MenuItemCommand.tsx    | 2 +-
 .../menu-item/components/MenuItemCommandHotKeys.tsx        | 7 ++-----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
index 25c042fd1..ad05dc985 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
@@ -5,7 +5,7 @@ import { Label } from 'twenty-ui/display';
 const StyledGroupHeading = styled(Label)`
   align-items: center;
   padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
   padding-right: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(2)};
   user-select: none;
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
index 93b6bf199..2865f5574 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
@@ -46,7 +46,7 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
   transition: all 150ms ease;
   transition-property: none;
   user-select: none;
-  width: calc(100% - 2 * var(--horizontal-padding));
+  width: 100%;
   box-sizing: border-box;
   height: 40px;
   &:hover {
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
index 075fa5e1c..e5222bdff 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React from 'react';
 
 const StyledCommandTextContainer = styled.div`
   align-items: center;
@@ -11,10 +11,7 @@ const StyledCommandTextContainer = styled.div`
 
 const StyledCommandText = styled.div`
   color: ${({ theme }) => theme.font.color.light};
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
+  vertical-align: middle;
   white-space: nowrap;
 `;