diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.css.ts b/packages/frontend/component/src/ui/modal/confirm-modal.css.ts index df56bd3f27..bb09f11314 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.css.ts +++ b/packages/frontend/component/src/ui/modal/confirm-modal.css.ts @@ -67,9 +67,16 @@ export const mobileStyles = { flexDirection: 'column', gap: 16, selectors: { + '&.row': { + flexDirection: 'row', + justifyContent: 'space-between', + }, '&.reverse': { flexDirection: 'column-reverse', }, + '&.rowReverse': { + flexDirection: 'row-reverse', + }, }, }), action: style([ @@ -80,6 +87,15 @@ export const mobileStyles = { borderRadius: 8, fontSize: 17, fontWeight: 400, + selectors: { + '&.row': { + width: 'auto', + minWidth: 0, + maxWidth: 140, + flex: 1, + height: 32, + }, + }, }, ]), }; diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.tsx index e50d8649cf..c1319a20de 100644 --- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx +++ b/packages/frontend/component/src/ui/modal/confirm-modal.tsx @@ -21,6 +21,11 @@ export interface ConfirmModalProps extends ModalProps { cancelText?: React.ReactNode; cancelButtonOptions?: Omit; reverseFooter?: boolean; + /** + * Whether to use row layout for mobile footer + * @default false + */ + rowFooter?: boolean; /** * Auto focus on confirm button when modal opened * @default true @@ -45,6 +50,7 @@ export const ConfirmModal = ({ descriptionClassName, childrenContentClassName, contentOptions, + rowFooter = false, ...props }: ConfirmModalProps) => { const onConfirmClick = useCallback(() => { @@ -84,13 +90,17 @@ export const ConfirmModal = ({
{onCancel !== false ? (