Trigger: group and label the perform action inputs

app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee

@@ -377,7 +377,6 @@ class App.UiElement.ticket_perform_action
       null: false
       options: { true: 'internal', false: 'public' }
       value: meta.internal || 'false'
-      class: 'form-control--small'
       translate: true
     )
 
@@ -423,9 +422,9 @@ class App.UiElement.ticket_perform_action
       name: "#{name}::internal"
       multiple: false
       null: false
+      label: 'Visibility'
       options: { true: 'internal', false: 'public' }
       value: meta.internal
-      class: 'form-control--small'
       translate: true
     )
     articleElement = $( App.view('generic/ticket_perform_action/article')(

app/assets/javascripts/app/controllers/trigger.coffee

@@ -21,7 +21,7 @@ class Index extends App.ControllerSubContent
           { name: 'New Trigger', 'data-type': 'new', class: 'btn--success' }
         ]
       container: @el.closest('.content')
-      large: true
+      veryLarge: true
     )
 
 App.Config.set('Trigger', { prio: 3300, name: 'Trigger', parent: '#manage', target: '#manage/trigger', controller: Index, permission: ['admin.trigger'] }, 'NavBarAdmin')

app/assets/javascripts/app/views/generic/ticket_perform_action/article.jst.eco

@@ -1,5 +1,22 @@
-<div class="flex">
+<div class="form-group">
-  <div class="js-internal"></div>
+  <div class="formGroup-label">
-  <div class="controls js-subject"><input type="text" name="<%= @name %>::subject" value="<%= @meta.subject %>" style="width: 100%;" placeholder="<%- @T('Subject') %>"></div>
+    <label><%- @T('Visibility') %></label>
-  <div class="controls js-body js-body-<%- @articleType %>"><div class="richtext form-control"><div contenteditable="true" data-name="<%= @name %>::body"><%- @meta.body %></div></div></div>
+  </div>
+  <div class="js-internal"></div>
+</div>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Subject') %></label>
+  </div>
+  <div class="controls js-subject">
+    <input type="text" name="<%= @name %>::subject" value="<%= @meta.subject %>" style="width: 100%;" placeholder="<%- @T('Subject') %>">
+  </div>
+</div>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Body') %></label>
+  </div>
+  <div class="controls js-body js-body-<%- @articleType %>">
+    <div class="richtext form-control"><div contenteditable="true" data-name="<%= @name %>::body"><%- @meta.body %></div></div>
+  </div>
 </div>

app/assets/javascripts/app/views/generic/ticket_perform_action/notification.jst.eco

@@ -1,11 +1,36 @@
-<div class="flex">
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Visibility') %></label>
+  </div>
   <div class="js-internal"></div>
+</div>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Recipient') %></label>
+  </div>
   <div class="controls js-recipient u-positionOrigin">
     <select></select>
-    <%- @Icon('arrow-down', 'dropdown-arrow') %>
+  </div>
+</div>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Recipient') %></label>
+  </div>
+  <div class="controls js-recipientUser u-positionOrigin">
+    <select></select>
+  </div>
 </div>
 <% if @notificationType is 'email': %>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Subject') %></label>
+  </div>
   <div class="controls js-subject"><input type="text" name="<%= @name %>::subject" value="<%= @meta.subject %>" style="width: 100%;" placeholder="<%- @T('Subject') %>"></div>
+</div>
 <% end %>
+<div class="form-group">
+  <div class="formGroup-label">
+    <label><%- @T('Body') %></label>
+  </div>
   <div class="controls js-body js-body-<%- @notificationType %>"><div class="richtext form-control"><div contenteditable="true" data-name="<%= @name %>::body"><%- @meta.body %></div></div></div>
 </div>

app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco

@@ -6,8 +6,8 @@
       </div>
     </div>
     <div class="js-setAttribute"></div>
-    <div class="js-setNotification flex"></div>
+    <div class="horizontal-filter-group js-setNotification flex"></div>
-    <div class="js-setArticle flex"></div>
+    <div class="horizontal-filter-group js-setArticle flex"></div>
   </div>
   <div class="filter-controls js-rowActions">
     <div class="filter-control filter-control-remove js-remove" title="<%- @Ti('Remote') %>">

app/assets/stylesheets/zammad.scss

@@ -8644,7 +8644,6 @@ label + .wizard-buttonList {
 
 .horizontal-filter {
   display: flex;
-  align-items: center;
   background: hsl(197,20%,93%);
   padding: 7px;
   border: 1px solid hsl(198,19%,86%);
@@ -8691,10 +8690,22 @@ label + .wizard-buttonList {
 
 .horizontal-filter-body {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   flex: 1;
 }
 
+.horizontal-filter-group {
+  padding: 10px;
+  background: hsl(109,0%,97%);
+  border: 1px solid hsl(201,19%,86%);
+  border-radius: 5px;
+  margin: 0 5px;
+  
+  > .form-group:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .horizontal-filter-value {
   flex-shrink: 0;
 
@@ -8838,7 +8849,7 @@ output {
 
 .filter-controls {
   display: flex;
-  align-items: center;
+  margin-top: 5.5px;
 }
 
 .filter-control {