- Added accomodation of mobile navigation bar in command menu (#17419)

Fix for #16743 

Added styles to accommodate for mobile navigation bar for better
visibility and better access of the command menu buttons.

## CommandMenuAskAIPage.tsx (Not shown in the issue)
### Before
<img width="1100" height="1792" alt="screenshot-2026-01-24_17-22-45"
src="https://github.com/user-attachments/assets/8a337ffe-9dfc-4e52-b744-622cc6989ae4"
/>

### After 
Since the component here already had some padding on it the mobile
navigation bar offset was lesser than it is in other places.
<img width="1092" height="1778" alt="screenshot-2026-01-24_17-28-33"
src="https://github.com/user-attachments/assets/00a217f1-d98e-4303-bdc1-df112d71a553"
/>


## CommandMenuWorkflowEditStep.tsx
### Before
As mentioned in the issue

### After
<img width="755" height="1061" alt="image"
src="https://github.com/user-attachments/assets/487d0b20-f544-4e85-99d5-eb5add4b2cb4"
/>

## CommandMenuWorkflowRunViewStep.tsx
### Before
As shown in the issue

### After
<img width="1102" height="1784" alt="screenshot-2026-01-24_17-19-31"
src="https://github.com/user-attachments/assets/a95773e3-5f61-46d0-93cb-e678e087a42f"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { AgentChatProvider } from '@/ai/components/AgentChatProvider';
 import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
@@ -7,9 +8,21 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
 import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useRecoilValue } from 'recoil';
 
+const StyledCommandMenuContainer = styled.div<{ isMobile: boolean }>`
+  max-height: ${({ theme, isMobile }) => {
+    const mobileOffset = isMobile ? theme.spacing(16) : '0px';
+
+    return `calc(100% - ${mobileOffset})`;
+  }};
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
 type CommandMenuContainerProps = {
   children: React.ReactNode;
 };
@@ -21,6 +34,7 @@ export const CommandMenuContainer = ({
     contextStoreCurrentObjectMetadataItemIdComponentState,
     COMMAND_MENU_COMPONENT_INSTANCE_ID,
   );
+  const isMobile = useIsMobile();
 
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
@@ -46,7 +60,11 @@ export const CommandMenuContainer = ({
         <ActionMenuComponentInstanceContext.Provider
           value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
         >
-          <AgentChatProvider>{children}</AgentChatProvider>
+          <AgentChatProvider>
+            <StyledCommandMenuContainer isMobile={isMobile}>
+              {children}
+            </StyledCommandMenuContainer>
+          </AgentChatProvider>
         </ActionMenuComponentInstanceContext.Provider>
       </ContextStoreComponentInstanceContext.Provider>
     </RecordComponentInstanceContextsWrapper>

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -14,8 +14,6 @@ import { t } from '@lingui/core/macro';
 import { useSetRecoilState } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
-const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
-
 export type CommandMenuListProps = {
   commandGroups: ActionGroupConfig[];
   selectableItemIds: string[];
@@ -27,8 +25,7 @@ export type CommandMenuListProps = {
 const StyledInnerList = styled.div`
   max-height: calc(
     100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
-      ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px -
-      ${MOBILE_NAVIGATION_BAR_HEIGHT}px
+      ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px
   );
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};