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

CHANGELOG

@@ -25,6 +25,7 @@ CHANGELOG Roundcube Webmail
 - Elastic: Fix bug where some menu actions could cause a browser popup warning
 - Elastic: Fix handling mailto: URL parameters in contact menu (#6751)
 - Elastic: Fix keyboard navigation in some menus, e.g. the contact menu
+- Elastic: Fix visual issue with long buttons in .boxwarning (#6797)
 - Larry: Fix regression where menu actions didn't work with keyboard (#6740)
 - Password: Added ldap_exop driver (#4992)
 - Managesieve: Fix bug where global includes were requested for vacation (#6716)

program/steps/mail/show.inc

@@ -242,8 +242,9 @@ function rcmail_remote_objects_msg()
     $attrib['class'] = 'notice';
     $attrib['style'] = 'display: none';
 
-    $msg = html::span(null, rcube::Q($RCMAIL->gettext('blockedresources'))) . ' '
-        . html::a(array(
+    $msg = html::span(null, rcube::Q($RCMAIL->gettext('blockedresources')));
+
+    $buttons = html::a(array(
             'href'    => "#loadremote",
             'onclick' => rcmail_output::JS_OBJECT_NAME.".command('load-remote')"
         ),
@@ -251,7 +252,7 @@ function rcmail_remote_objects_msg()
 
     // add link to save sender in addressbook and reload message
     if ($MESSAGE->sender['mailto'] && $RCMAIL->config->get('show_images') == 1) {
-        $msg .= ' ' . html::a(array(
+        $buttons .= ' ' . html::a(array(
                 'href'    => "#loadremotealways",
                 'onclick' => rcmail_output::JS_OBJECT_NAME.".command('load-remote', true)",
                 'style'   => "white-space:nowrap"
@@ -261,7 +262,7 @@ function rcmail_remote_objects_msg()
 
     $RCMAIL->output->add_gui_object('remoteobjectsmsg', $attrib['id']);
 
-    return html::div($attrib, $msg);
+    return html::div($attrib, $msg . ' ' . html::span('boxbuttons', $buttons));
 }
 
 function rcmail_message_buttons()

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 {