- 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>
This commit is contained in:
committed by
GitHub
parent
7e5e800f63
commit
2d42b0a726
@@ -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)};
|
||||
|
||||
Reference in New Issue
Block a user