8976 modify mobile page header (#9020)

Closes #8976

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -10,6 +10,7 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 export const RecordIndexActionMenu = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
@@ -22,6 +23,8 @@ export const RecordIndexActionMenu = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {contextStoreCurrentObjectMetadataId && (
@@ -32,7 +35,7 @@ export const RecordIndexActionMenu = () => {
           }}
         >
           {isPageHeaderV2Enabled ? (
-            <RecordIndexActionMenuButtons />
+            <>{!isMobile && <RecordIndexActionMenuButtons />}</>
           ) : (
             <RecordIndexActionMenuBar />
           )}

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx

@@ -1,4 +1,4 @@
-import { Button, IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconButton, IconDotsVertical, useIsMobile } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -10,16 +10,18 @@ export const PageHeaderOpenCommandMenuButton = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconDotsVertical}
           dataTestId="page-header-open-command-menu-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          shortcut="⌘K"
+          shortcut={isMobile ? '' : '⌘K'}
           ariaLabel="Open command menu"
           onClick={openCommandMenu}
         />

packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx

@@ -1,5 +1,5 @@
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { Button, IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconButton, IconPlus, useIsMobile } from 'twenty-ui';
 
 type PageAddButtonProps = {
   onClick?: () => void;
@@ -9,16 +9,18 @@ export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
   const isPageHeaderV2Enabled = useIsFeatureEnabled(
     'IS_PAGE_HEADER_V2_ENABLED',
   );
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconPlus}
           dataTestId="add-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          title="New record"
+          title={isMobile ? '' : 'New record'}
           onClick={onClick}
           ariaLabel="New record"
         />

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -170,14 +170,14 @@ export const PageHeader = ({
           <>
             <IconButton
               Icon={IconChevronUp}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasPreviousRecord}
               onClick={() => navigateToPreviousRecord?.()}
             />
             <IconButton
               Icon={IconChevronDown}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasNextRecord}
               onClick={() => navigateToNextRecord?.()}