Search dialog fullscreen on mobile (#5765)

I changed the visibility of the search dialog to make it full screen on
mobile, this should already be ok but I couldn't try it on mobile, so I
just used devtools, if I need to do something else on this PR just tell
me :)
This PR aims to fix: #5746

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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

@@ -35,19 +35,16 @@ import { CommandMenuItem } from './CommandMenuItem';
 
 export const StyledDialog = styled.div`
   background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
+  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
   font-family: ${({ theme }) => theme.font.family};
-  left: 50%;
-  max-width: 640px;
+  height: 100%;
   overflow: hidden;
   padding: 0;
   position: fixed;
-  top: 30%;
-  transform: ${() =>
-    useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
-  width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
+  right: 0%;
+  top: 0%;
+  width: ${() => (useIsMobile() ? '100%' : '500px')};
   z-index: 1000;
 `;
 
@@ -60,7 +57,8 @@ export const StyledInput = styled.input`
   font-size: ${({ theme }) => theme.font.size.lg};
   margin: 0;
   outline: none;
-  padding: ${({ theme }) => theme.spacing(5)};
+  height: 24px;
+  padding: ${({ theme }) => theme.spacing(4)};
   width: ${({ theme }) => `calc(100% - ${theme.spacing(10)})`};
 
   &::placeholder {
@@ -80,8 +78,6 @@ const StyledCancelText = styled.span`
 
 export const StyledList = styled.div`
   background: ${({ theme }) => theme.background.secondary};
-  height: 400px;
-  max-height: 400px;
   overscroll-behavior: contain;
   transition: 100ms ease;
   transition-property: height;
@@ -119,6 +115,8 @@ export const CommandMenu = () => {
     setCommandMenuSearch(event.target.value);
   };
 
+  const isMobile = useIsMobile();
+
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
@@ -267,7 +265,7 @@ export const CommandMenu = () => {
             placeholder="Search"
             onChange={handleSearchChange}
           />
-          <StyledCancelText>Esc to cancel</StyledCancelText>
+          {!isMobile && <StyledCancelText>Esc to cancel</StyledCancelText>}
           <StyledList>
             <ScrollWrapper>
               <StyledInnerList>

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -22,7 +22,7 @@ type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
 
 export const MobileNavigationBar = () => {
   const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
-  const { closeCommandMenu, toggleCommandMenu } = useCommandMenu();
+  const { closeCommandMenu, openCommandMenu } = useCommandMenu();
   const isTasksPage = useIsTasksPage();
   const isSettingsPage = useIsSettingsPage();
   const navigate = useNavigate();
@@ -62,8 +62,10 @@ export const MobileNavigationBar = () => {
       name: 'search',
       Icon: IconSearch,
       onClick: () => {
+        if (!isCommandMenuOpened) {
+          openCommandMenu();
+        }
         setIsNavigationDrawerOpen(false);
-        toggleCommandMenu();
       },
     },
     {

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx

@@ -2,6 +2,8 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
 import {
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
@@ -83,6 +85,7 @@ export const MenuItemCommand = ({
   onClick,
 }: MenuItemCommandProps) => {
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   return (
     <StyledMenuItemCommandContainer
@@ -100,10 +103,12 @@ export const MenuItemCommand = ({
           {text}
         </StyledMenuItemLabelText>
       </StyledMenuItemLeftContent>
-      <MenuItemCommandHotKeys
-        firstHotKey={firstHotKey}
-        secondHotKey={secondHotKey}
-      />
+      {!isMobile && (
+        <MenuItemCommandHotKeys
+          firstHotKey={firstHotKey}
+          secondHotKey={secondHotKey}
+        />
+      )}
     </StyledMenuItemCommandContainer>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx

@@ -8,6 +8,7 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(3)};
+  z-index: 1001;
 `;
 
 type NavigationBarProps = {