runfix: wrap buttons to new line (#17742)

wireapp · Aug 12, 2024 · 428436c · 428436c
1 parent 07ef40d
commit 428436c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/script/components/panel/SingleAction/SingleAction.styles.ts b/src/script/components/panel/SingleAction/SingleAction.styles.ts
@@ -19,7 +19,10 @@
 
 import {CSSObject} from '@emotion/react';
 
-export const singleActionButtonStyle: CSSObject = {
+export const singleActionButtonStyle = (oneButtonPerRow = false): CSSObject => ({
   width: '100%',
-  margin: '0 8px',
-};
+  margin: 0,
+  flex: oneButtonPerRow ? '1' : '1 1 125px',
+  minWidth: 'unset',
+  overflow: 'unset',
+});
diff --git a/src/script/components/panel/SingleAction/SingleAction.tsx b/src/script/components/panel/SingleAction/SingleAction.tsx
@@ -39,20 +39,24 @@ export interface SingleActionProps {
 const SingleAction = ({item, onCancel, oneButtonPerRow = false}: SingleActionProps) => {
   return (
     <FlexBox
-      flexWrap={oneButtonPerRow ? 'wrap-reverse' : 'nowrap'}
-      css={{rowGap: '8px'}}
+      css={{
+        rowGap: 8,
+        columnGap: 16,
+        flexDirection: oneButtonPerRow ? 'column-reverse' : 'row',
+        flexWrap: 'wrap-reverse',
+      }}
       justify="space-evenly"
       className="modal__buttons"
     >
       <Button
         variant={ButtonVariant.SECONDARY}
         onClick={onCancel}
         data-uie-name="do-close"
-        css={singleActionButtonStyle}
+        css={singleActionButtonStyle(oneButtonPerRow)}
       >
         {t('modalConfirmSecondary')}
       </Button>
-      <Button onClick={item.click} data-uie-name={item.identifier} css={singleActionButtonStyle}>
+      <Button onClick={item.click} data-uie-name={item.identifier} css={singleActionButtonStyle(oneButtonPerRow)}>
         {item.label}
       </Button>
     </FlexBox>