From 428436c7d85a65b633eb73c8f9fadb6e8c7f76de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20G=C3=B3rka?= <patrykbunix@gmail.com>
Date: Mon, 12 Aug 2024 14:49:26 +0200
Subject: [PATCH] runfix: wrap buttons to new line (#17742)

---
 .../panel/SingleAction/SingleAction.styles.ts        |  9 ++++++---
 .../components/panel/SingleAction/SingleAction.tsx   | 12 ++++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/script/components/panel/SingleAction/SingleAction.styles.ts b/src/script/components/panel/SingleAction/SingleAction.styles.ts
index b2ada4d91a4..d02ae6b3748 100644
--- 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
index 3113a42c1bf..84cce558c58 100644
--- a/src/script/components/panel/SingleAction/SingleAction.tsx
+++ b/src/script/components/panel/SingleAction/SingleAction.tsx
@@ -39,8 +39,12 @@ 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"
     >
@@ -48,11 +52,11 @@ const SingleAction = ({item, onCancel, oneButtonPerRow = false}: SingleActionPro
         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>