Elastic: Fix visual issue with long buttons in .boxwarning (#6797)

1 files changed, 23 insertions, 0 deletions

diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index f1e6d8d9c..fa0f662d9 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -92,6 +92,29 @@
         content: @fa-var-comment;
     }
 
+    // #6797: Fix for long buttons issue
+    .boxbuttons {
+        white-space: nowrap;
+
+        .btn {
+            .overflow-ellipsis;
+            max-width: 220px;
+        }
+
+        @media screen and (max-width: @screen-width-xs) {
+            display: flex;
+            flex-direction: column;
+
+            .btn {
+                max-width: 160px;
+
+                &:not(:first-child) {
+                    margin-top: .25rem;
+                }
+            }
+        }
+    }
+
     // This works with following structure: <i> <span> [button].
     // <span> here is a one-line text, and button can be anything but <span>.
     &.aligned-buttons {