From 66464c22ebfe4ed7f3fe72684846e79baa05bb08 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Mon, 25 Dec 2023 17:13:53 +0200
Subject: [PATCH 1/4] feature: conditional class & font-size changes

---
 src/common/ModalDialog/ModalDialog.js |  2 +-
 src/common/ModalDialog/styles.less    | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index e7e2e8056..12513df1b 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -84,7 +84,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                                     }
                                     {
                                         typeof label === 'string' && label.length > 0 ?
-                                            <div className={styles['label']}>{label}</div>
+                                            <div className={classnames(buttons.length > 2 ? styles['small-label'] : styles['label'])}>{label}</div>
                                             :
                                             null
                                     }
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index c7f136a5b..5dbec9033 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -84,6 +84,7 @@
         }
     }
 }
+
 .action-button {
     flex: 1;
     display: flex;
@@ -116,7 +117,7 @@
         color: var(--primary-foreground-color);
     }
 
-    .label {
+    .label, .small-label {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: auto;
@@ -126,7 +127,6 @@
         text-align: center;
         color: var(--primary-foreground-color);
     }
-
 }
 
 @media only screen and (max-width: @minimum) {
@@ -139,4 +139,11 @@
             padding: 0 1.5rem;
         }
     }
+
+    .action-button {
+        .small-label {
+            font-size: 0.688rem;
+            font-weight: 600;
+        }
+    }
 }
\ No newline at end of file

From 374f4689047e01817bfa47067b62ade9282c4445 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:02:01 +0200
Subject: [PATCH 2/4] refactor: changed the fix approach

---
 src/common/ModalDialog/styles.less | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 5dbec9033..c781c2c7b 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -137,13 +137,16 @@
             max-width: initial;
             z-index: 0;
             padding: 0 1.5rem;
+
+            .buttons-container {
+                flex-direction: column;
+                gap: 1rem;
+            }
         }
-    }
 
-    .action-button {
-        .small-label {
-            font-size: 0.688rem;
-            font-weight: 600;
+        .action-button {
+            text-overflow: ellipsis;
+            width: 100%;
         }
     }
 }
\ No newline at end of file

From d3913e6d522e6cccb3e5354ba8f00343b05ec639 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:05:42 +0200
Subject: [PATCH 3/4] remove: additional conditional class small-label

not needed anymore
---
 src/common/ModalDialog/ModalDialog.js | 2 +-
 src/common/ModalDialog/styles.less    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 12513df1b..e7e2e8056 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -84,7 +84,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                                     }
                                     {
                                         typeof label === 'string' && label.length > 0 ?
-                                            <div className={classnames(buttons.length > 2 ? styles['small-label'] : styles['label'])}>{label}</div>
+                                            <div className={styles['label']}>{label}</div>
                                             :
                                             null
                                     }
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index c781c2c7b..0e6fe8d9e 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -117,7 +117,7 @@
         color: var(--primary-foreground-color);
     }
 
-    .label, .small-label {
+    .label {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: auto;

From dd38bf14e4f01173582877226d12aed6074d1454 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:19:26 +0200
Subject: [PATCH 4/4] refactor: ellipsis added to label instad of action-button

---
 src/common/ModalDialog/styles.less | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 0e6fe8d9e..796685b38 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -145,8 +145,12 @@
         }
 
         .action-button {
-            text-overflow: ellipsis;
             width: 100%;
+
+            .label {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
     }
 }
\ No newline at end of file