- 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>
2026-02-09 14:48:45 -08:00
parent 7e5e800f63
commit 2d42b0a726
9 changed files with 38 additions and 52 deletions
@@ -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%;
@@ -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 = () => {
        )}
      </StyledContainer>
      {canReply && !messageChannelLoading && (
-        <StyledButtonContainer isMobile={isMobile}>
+        <StyledButtonContainer>
          <Button
            size="small"
            onClick={handleReplyClick}
@@ -4,23 +4,14 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
 import { MergeRecordsContainer } from '@/object-record/record-merge/components/MergeRecordsContainer';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import styled from '@emotion/styled';

-const StyledRightDrawerRecord = styled.div<{
-  isMobile: boolean;
-}>`
-  height: ${({ theme, isMobile }) => {
-    const mobileOffset = isMobile ? theme.spacing(16) : '0px';
-
-    return `calc(100% - ${mobileOffset})`;
-  }};
+const StyledRightDrawerRecord = styled.div`
+  height: 100%;
 `;

 export const CommandMenuMergeRecordPage = () => {
-  const isMobile = useIsMobile();
-
  const commandMenuPageInstanceId = useComponentInstanceStateContext(
    CommandMenuPageComponentInstanceContext,
  )?.instanceId;
@@ -45,7 +36,7 @@ export const CommandMenuMergeRecordPage = () => {
        <ActionMenuComponentInstanceContext.Provider
          value={{ instanceId: commandMenuPageInstanceId }}
        >
-          <StyledRightDrawerRecord isMobile={isMobile}>
+          <StyledRightDrawerRecord>
            <MergeRecordsContainer
              objectNameSingular={objectMetadataItem.nameSingular}
            />
@@ -9,28 +9,23 @@ import { RecordComponentInstanceContextsWrapper } from '@/object-record/componen
 import { PageLayoutDispatcher } from '@/object-record/record-show/components/PageLayoutDispatcher';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';

 const StyledRightDrawerRecord = styled.div<{
-  isMobile: boolean;
  hasDeletedRecordBanner: boolean;
 }>`
-  height: ${({ theme, isMobile, hasDeletedRecordBanner }) => {
-    const mobileOffset = isMobile ? theme.spacing(16) : '0px';
+  height: ${({ hasDeletedRecordBanner }) => {
    const bannerOffset = hasDeletedRecordBanner
      ? INFORMATION_BANNER_HEIGHT
      : '0px';
-    return `calc(100% - ${mobileOffset} - ${bannerOffset})`;
+    return `calc(100% - ${bannerOffset})`;
  }};
 `;

 export const CommandMenuRecordPage = () => {
-  const isMobile = useIsMobile();
-
  const viewableRecordNameSingular = useRecoilComponentValue(
    viewableRecordNameSingularComponentState,
  );
@@ -79,10 +74,7 @@ export const CommandMenuRecordPage = () => {
        <ActionMenuComponentInstanceContext.Provider
          value={{ instanceId: commandMenuPageInstanceId }}
        >
-          <StyledRightDrawerRecord
-            isMobile={isMobile}
-            hasDeletedRecordBanner={!!recordDeletedAt}
-          >
+          <StyledRightDrawerRecord hasDeletedRecordBanner={!!recordDeletedAt}>
            <TimelineActivityContext.Provider
              value={{
                recordId: objectRecordId,
@@ -2,23 +2,14 @@ import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/c
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';

 import { UpdateMultipleRecordsContainer } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import styled from '@emotion/styled';

-const StyledRightDrawerRecord = styled.div<{
-  isMobile: boolean;
-}>`
-  height: ${({ theme, isMobile }) => {
-    const mobileOffset = isMobile ? theme.spacing(16) : '0px';
-
-    return `calc(100% - ${mobileOffset})`;
-  }};
+const StyledRightDrawerRecord = styled.div`
+  height: 100%;
 `;

 export const CommandMenuUpdateMultipleRecords = () => {
-  const isMobile = useIsMobile();
-
  const commandMenuPageInstanceId = useComponentInstanceStateContext(
    CommandMenuPageComponentInstanceContext,
  )?.instanceId;
@@ -32,7 +23,7 @@ export const CommandMenuUpdateMultipleRecords = () => {
  );

  return (
-    <StyledRightDrawerRecord isMobile={isMobile}>
+    <StyledRightDrawerRecord>
      <UpdateMultipleRecordsContainer
        objectNameSingular={objectMetadataItem.nameSingular}
        contextStoreInstanceId={commandMenuPageInstanceId}
@@ -5,7 +5,6 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-

 export const CommandMenuWorkflowRunViewStep = () => {
  const workflowRunId = useCommandMenuWorkflowRunIdOrThrow();
-
  return (
    <WorkflowVisualizerComponentInstanceContext.Provider
      value={{