Fixes #3473 - Macros are not displayed within the Mobile View

- hides avatars for now (using bootstrap utility class .hidden-xs)
- for a future mobile placement of the avatars in for example the sidebar, use .visible-xs to only show them on mobile)
- reference: https://getbootstrap.com/docs/3.3/css/#responsive-utilities

app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco

@@ -1,5 +1,5 @@
-<div class="attributeBar-avatars flex horizontal js-avatars"></div>
+<div class="attributeBar-avatars flex horizontal js-avatars hidden-xs"></div>
-<div class="buttonDropdown btn js-reset <% if !@resetButtonShown: %>hide<% end %>"><%- @T('Discard your unsaved changes.') %></div>
+<div class="attributeBar-reset buttonDropdown btn js-reset <% if !@resetButtonShown: %>hide<% end %>"><span><%- @T('Discard your unsaved changes.') %></span></div>
 <div class="buttonDropdown dropdown dropdown--actions dropup">
   <div class="btn btn--text btn--icon--last" data-toggle="dropdown">
     <span class="js-secondaryActionButtonLabel"></span> <%- @Icon('arrow-up') %>
@@ -26,10 +26,10 @@
 </div>
 <form class="buttonDropdown">
 <% if @macroDisabled: %>
-  <button class="btn btn--primary js-submit"><%- @T('Update') %></button>
+  <button class="btn btn--primary js-submit"><span><%- @T('Update') %></span></button>
 <% else: %>
   <div class="buttonDropdown dropdown dropup js-submitDropdown">
-    <button class="btn btn--primary btn--split--first js-submit"><%- @T('Update') %></button>
+    <button class="btn btn--primary btn--split--first js-submit"><span><%- @T('Update') %></span></button>
     <button class="btn btn--primary btn--slim btn--only-icon btn--split--last js-openDropdownMacro"><%- @Icon('arrow-up') %></button>
     <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
       <% for macro in @macros: %>

app/assets/stylesheets/zammad.scss

@@ -437,6 +437,7 @@ pre code.hljs {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: block;
   }
 
   &--only-icon .icon,
@@ -7624,27 +7625,31 @@ footer {
   transition: margin 250ms;
   flex-shrink: 0;
 
-  @include phone {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    direction: rtl;
-  }
-
   &.is-closed {
     margin-bottom: -60px;
   }
 
+  @include phone {
+    &-reset {
+      flex-shrink: 5;
+    }
+
+    .btn,
+    .buttonDropdown {
+      min-width: 20px;
+
+      &--only-icon {
+        min-width: 36px;
+      }
+    }
+  }
+
   &-inner {
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: 10px;
-
-    @include phone {
-      width: fit-content;
-      direction: initial;
-    }
   }
 
   &-avatars {