- 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/ai/components/AIChatTab.tsx

@@ -22,6 +22,7 @@ import { AI_CHAT_SCROLL_WRAPPER_ID } from '@/ai/constants/AiChatScrollWrapperId'
 import { useAIChatFileUpload } from '@/ai/hooks/useAIChatFileUpload';
 import { useAgentChatContextOrThrow } from '@/ai/hooks/useAgentChatContextOrThrow';
 import { agentChatInputState } from '@/ai/states/agentChatInputState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
@@ -36,12 +37,13 @@ const StyledContainer = styled.div<{ isDraggingFile: boolean }>`
   flex-direction: column;
 `;
 
-const StyledInputArea = styled.div`
+const StyledInputArea = styled.div<{ isMobile: boolean }>`
   align-items: flex-end;
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(3)};
+  padding-inline: ${({ theme }) => theme.spacing(3)};
+  padding-block: ${({ theme, isMobile }) => (isMobile ? 0 : theme.spacing(3))};
   background: ${({ theme }) => theme.background.primary};
 `;
 
@@ -105,7 +107,7 @@ const StyledButtonsContainer = styled.div`
 
 export const AIChatTab = () => {
   const [isDraggingFile, setIsDraggingFile] = useState(false);
-
+  const isMobile = useIsMobile();
   const { isLoading, messages, isStreaming, error } =
     useAgentChatContextOrThrow();
 
@@ -163,7 +165,7 @@ export const AIChatTab = () => {
           )}
           {isLoading && messages.length === 0 && <AIChatSkeletonLoader />}
 
-          <StyledInputArea>
+          <StyledInputArea isMobile={isMobile}>
             <AgentChatContextPreview />
             <StyledInputBox>
               <StyledTextAreaWrapper>