Merge pull request #2654 from ulferts/fix/wp_menu_modal_forms

fix styling of sort by modal form

app/assets/stylesheets/content/_forms.sass

@@ -73,6 +73,11 @@ $form--field-types: (text-field, text-area, select, check-box, range-field, sear
 .form--space
   padding-top: 10px
 
+.form--row
+  @include grid-block
+  // cancel out foundations overflow-y: auto
+  overflow: visible
+
 fieldset
   legend:after
     @include icon-common
@@ -217,6 +222,7 @@ fieldset.form--fieldset
     @include grid-orient(vertical)
 
   .grid-block:nth-last-of-type(n+2) > &,
+  .form--row:nth-last-of-type(n+2) > &,
   .form--grouping-row > &:nth-last-of-type(n+2)
     padding-right: 1rem
 

frontend/public/templates/work_packages/modals/sorting.html

@@ -6,43 +6,49 @@
 
     <form name="modalSortingForm">
       <div id="modal-sorting" class="modal-content-container" cg-busy="promise">
-        <div ng-repeat="element in sortElements">
-          <ui-select ng-model="element[0]" theme="select2">
-            <ui-select-match>{{$select.selected.label}}</ui-select-match>
-            <ui-select-choices repeat="column as column in getRemainingAvailableColumnsData() | filter: { title: $select.search }">
-              <div ng-bind-html="column.label | highlight: $select.search"></div>
-            </ui-select-choices>
-          </ui-select>
-          <label class="option-label">
-            <input type="radio"
-                   tabindex="0"
-                   ng-model="element[1]"
-                   ng-required="element[0].id"
-                   ng-disabled="!element[0].id"
-                   ng-value="availableDirectionsData[1]">
-            {{availableDirectionsData[1].label}}
-          </label>
-          <label class="option-label">
-            <input type="radio"
-                   tabindex="0"
-                   ng-model="element[1]"
-                   ng-required="element[0].id"
-                   ng-disabled="!element[0].id"
-                   ng-value="availableDirectionsData[0]">
-            {{availableDirectionsData[0].label}}
-          </label>
+        <div class="form--row" ng-repeat="element in sortElements">
+          <div class="form--field -full-width">
+            <div class="form--field-container">
+              <ui-select ng-model="element[0]" theme="select2">
+                <ui-select-match>{{$select.selected.label}}</ui-select-match>
+                <ui-select-choices repeat="column as column in getRemainingAvailableColumnsData() | filter: { title: $select.search }">
+                  <div ng-bind-html="column.label | highlight: $select.search"></div>
+                </ui-select-choices>
+              </ui-select>
+            </div>
+          </div>
+          <div class="form--field -full-width">
+            <div class="form--field-container">
+              <label class="option-label">
+                <input type="radio"
+                       tabindex="0"
+                       ng-model="element[1]"
+                       ng-required="element[0].id"
+                       ng-disabled="!element[0].id"
+                       ng-value="availableDirectionsData[1]">
+                {{availableDirectionsData[1].label}}
+              </label>
+              <label class="option-label">
+                <input type="radio"
+                       tabindex="0"
+                       ng-model="element[1]"
+                       ng-required="element[0].id"
+                       ng-disabled="!element[0].id"
+                       ng-value="availableDirectionsData[0]">
+                {{availableDirectionsData[0].label}}
+              </label>
+            </div>
+          </div>
         </div>
       </div>
-      <div>
-        <button class="button -highlight"
-                ng-disabled="modalSortingForm.$invalid"
-                ng-click="updateSortation()">
-          {{ I18n.t('js.modals.button_apply') }}
-        </button>
-        <button class="button" ng-click="modal.closeMe()">
-          {{ I18n.t('js.modals.button_cancel') }}
-        </button>
-      </div>
+      <button class="button -highlight"
+              ng-disabled="modalSortingForm.$invalid"
+              ng-click="updateSortation()">
+        {{ I18n.t('js.modals.button_apply') }}
+      </button>
+      <button class="button" ng-click="modal.closeMe()">
+        {{ I18n.t('js.modals.button_cancel') }}
+      </button>
     </form>
 
   </div>