diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 08694d4a9..efd72c3b9 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/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}
/>
- Esc to cancel
+ {!isMobile && Esc to cancel}
diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
index 6c73d5633..02d9283c6 100644
--- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
+++ b/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();
},
},
{
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
index 7438aaf52..7f363eed7 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/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 (
-
+ {!isMobile && (
+
+ )}
);
};
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
index 92c8e0072..5474ff1cc 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
+++ b/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 = {