Fixes #3359 - Some macros are hidden in the drag & drop overview with a small screen size

app/assets/javascripts/app/views/ticket_overview/batch_overlay_macro.jst.eco

@@ -1,6 +1,7 @@
 <div class="batch-overlay-box-inner">
+<% isSmall = @macros.length > 20 %>
 <% for macro in @macros: %>
-  <div class="batch-overlay-macro-entry js-batch-overlay-entry js-batch-hover-target" data-action="macro" data-id="<%= macro.id %>">
+  <div class="batch-overlay-macro-entry js-batch-overlay-entry js-batch-hover-target <%- 'small' if isSmall %>" data-action="macro" data-id="<%= macro.id %>">
     <div class="batch-overlay-macro-entry-name"><%= macro.name %></div>
   </div>
 <% end %>

app/assets/stylesheets/zammad.scss

@@ -11588,11 +11588,7 @@ output {
     bottom: -50px; // extra space for bounce animation
 
     .batch-overlay-box-inner {
-      max-height: 310px;
+      max-height: 40vh;
-
-      @media screen and (min-height: 1000px) {
-        max-height: 465px;
-      }
     }
 
     &-group {
@@ -11657,12 +11653,8 @@ output {
     top: -50px; // extra space for bounce animation
 
     .batch-overlay-box-inner {
-      max-height: 146px;
+      max-height: 55vh;
       margin: 24px 12px;
-
-      @media screen and (min-height: 800px) {
-        max-height: 292px;
-      }
     }
 
     &-entry {
@@ -11682,6 +11674,14 @@ output {
         border-color: $highlight-color;
         transform: scale(1.05);
       }
+
+      &.small {
+        @include small-desktop {
+          height: 80px;
+          width: 80px;
+          padding: 11px 11px 8px;
+        }
+      }
     }
   }
 }
@@ -11712,7 +11712,7 @@ output {
       color: inherit;
     }
 
-    td {
+    td:not(:first-child) {
       display: block;
       padding: 0 12px;
       white-space: nowrap;
@@ -11728,6 +11728,11 @@ output {
         display: none;
       }
     }
+
+    .checkbox-replacement > .icon,
+    .radio-replacement > .icon {
+      fill: none;
+    }
   }
 
   &-counter {

spec/support/capybara/browser_test_helper.rb

@@ -107,6 +107,22 @@ module BrowserTestHelper
     page.driver.browser.action.click_and_hold(element).perform
   end
 
+  # Clicks and hold (without releasing) in the middle of the given element
+  # and moves it to the top left of the page to show marcos batches in
+  # overview section.
+  #
+  # @example
+  # display_macro_batches(ticket)
+  # display_macro_batches(tr[data-id='1'])
+  #
+  def display_macro_batches(element)
+    click_and_hold(element)
+    # move element to y -ticket.location.y
+    move_mouse_by(0, -element.location.y + 5)
+    # move a bit to the left to display macro batches
+    move_mouse_by(-250, 0)
+  end
+
   # Releases the depressed left mouse button at the current mouse location.
   #
   # @example

spec/system/ticket/view_spec.rb

@@ -117,6 +117,119 @@ RSpec.describe 'Ticket views', type: :system do
         end.not_to raise_error
       end
     end
+
+    context 'with macro batch overlay' do
+      shared_examples "adding 'small' class to macro element" do
+        it 'adds a "small" class to the macro element' do
+          within(:active_content) do
+
+            ticket = page.find(:table_row, Ticket.first.id).native
+
+            display_macro_batches(ticket)
+
+            expect(page).to have_selector('.batch-overlay-macro-entry.small', wait: 10)
+
+            release_mouse
+          end
+        end
+      end
+
+      shared_examples "not adding 'small' class to macro element" do
+        it 'does not add a "small" class to the macro element' do
+          within(:active_content) do
+
+            ticket = page.find(:table_row, Ticket.first.id).native
+
+            display_macro_batches(ticket)
+
+            expect(page).to have_no_selector('.batch-overlay-macro-entry.small', wait: 10)
+
+            release_mouse
+          end
+        end
+      end
+
+      shared_examples 'showing all macros' do
+        it 'shows all macros' do
+          within(:active_content) do
+
+            ticket = page.find(:table_row, Ticket.first.id).native
+
+            display_macro_batches(ticket)
+
+            expect(page).to have_selector('.batch-overlay-macro-entry', count: all, wait: 10)
+
+            release_mouse
+          end
+        end
+      end
+
+      shared_examples 'showing some macros' do |count|
+        it 'shows all macros' do
+          within(:active_content) do
+
+            ticket = page.find(:table_row, Ticket.first.id).native
+
+            display_macro_batches(ticket)
+
+            expect(page).to have_selector('.batch-overlay-macro-entry', count: count, wait: 10)
+
+            release_mouse
+          end
+        end
+      end
+
+      shared_examples 'show macros batch overlay' do
+        before do
+          Macro.destroy_all && (create_list :macro, all)
+          refresh
+          page.current_window.resize_to(width, height)
+          visit '#ticket/view/all_open'
+        end
+
+        context 'with few macros' do
+          let(:all) { 15 }
+
+          context 'when on large screen' do
+            let(:width) { 1520 }
+            let(:height) { 1040 }
+
+            it_behaves_like 'showing all macros'
+            it_behaves_like "not adding 'small' class to macro element"
+          end
+
+          context 'when on small screen' do
+            let(:width) { 1020 }
+            let(:height) { 1040 }
+
+            it_behaves_like 'showing all macros'
+            it_behaves_like "not adding 'small' class to macro element"
+          end
+
+        end
+
+        context 'with many macros' do
+          let(:all) { 50 }
+
+          context 'when on large screen' do
+            let(:width) { 1520 }
+            let(:height) { 1040 }
+
+            it_behaves_like 'showing some macros', 32
+          end
+
+          context 'when on small screen' do
+            let(:width) { 1020 }
+            let(:height) { 1040 }
+
+            it_behaves_like 'showing some macros', 30
+            it_behaves_like "adding 'small' class to macro element"
+          end
+        end
+      end
+
+      include_examples 'show macros batch overlay'
+    end
   end
 
   context 'bulk note', authenticated_as: :user do