From 2d42b0a7262e5ef754f3d9073fcffd09d1853374 Mon Sep 17 00:00:00 2001 From: Lakshay Manchanda Date: Mon, 9 Feb 2026 14:48:45 -0800 Subject: [PATCH] - 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 screenshot-2026-01-24_17-22-45 ### After Since the component here already had some padding on it the mobile navigation bar offset was lesser than it is in other places. screenshot-2026-01-24_17-28-33 ## CommandMenuWorkflowEditStep.tsx ### Before As mentioned in the issue ### After image ## CommandMenuWorkflowRunViewStep.tsx ### Before As shown in the issue ### After screenshot-2026-01-24_17-19-31 --------- Co-authored-by: Charles Bochet --- .../src/modules/ai/components/AIChatTab.tsx | 10 ++++++---- .../components/CommandMenuContainer.tsx | 20 ++++++++++++++++++- .../components/CommandMenuList.tsx | 5 +---- .../components/CommandMenuAskAIPage.tsx | 2 +- .../CommandMenuMessageThreadPage.tsx | 8 ++------ .../components/CommandMenuMergeRecordPage.tsx | 15 +++----------- .../components/CommandMenuRecordPage.tsx | 14 +++---------- .../CommandMenuUpdateMultipleRecords.tsx | 15 +++----------- .../CommandMenuWorkflowRunViewStep.tsx | 1 - 9 files changed, 38 insertions(+), 52 deletions(-) diff --git a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx index 2a251d67c2..d0d42a6e14 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx +++ b/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 && } - + diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx index 671897d659..3330cd2c06 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx +++ b/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 = ({ - {children} + + + {children} + + diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx index 23a8497f6d..a77820f2e8 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx +++ b/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)}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx index 006bf4ab77..4d8e93f292 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx @@ -1,5 +1,5 @@ -import { AIChatTab } from '@/ai/components/AIChatTab'; import styled from '@emotion/styled'; +import { AIChatTab } from '@/ai/components/AIChatTab'; const StyledContainer = styled.div` height: 100%; diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx index 2daf7171e3..62f97c0cbd 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx @@ -8,7 +8,6 @@ import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMe import { CommandMenuMessageThreadIntermediaryMessages } from '@/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages'; import { useEmailThreadInCommandMenu } from '@/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu'; import { messageThreadComponentState } from '@/command-menu/pages/message-thread/states/messageThreadComponentState'; -import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; import { t } from '@lingui/core/macro'; import { ConnectedAccountProvider } from 'twenty-shared/types'; @@ -31,12 +30,11 @@ const StyledContainer = styled.div` overflow-y: auto; `; -const StyledButtonContainer = styled.div<{ isMobile: boolean }>` +const StyledButtonContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; border-top: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; justify-content: flex-end; - height: ${({ isMobile }) => (isMobile ? '100px' : '50px')}; padding: ${({ theme }) => theme.spacing(2)}; width: 100%; box-sizing: border-box; @@ -53,8 +51,6 @@ export const CommandMenuMessageThreadPage = () => { messageThreadComponentState, ); - const isMobile = useIsMobile(); - const { thread, messages, @@ -170,7 +166,7 @@ export const CommandMenuMessageThreadPage = () => { )} {canReply && !messageChannelLoading && ( - +