These changes fix the overlapping filter settings and the customize o…

…ptions dropdown on the `User Interface` page. The 2 buttons (save and delete) got an improvement alignment.

Further improvements:
- spacing between title and UI config name
- fix paddings on smaller screens
- whitespace between buttons and inputs

web-ui/src/main/resources/catalog/components/admin/uiconfig/partials/uiconfig.html

@@ -3,14 +3,12 @@
     id="gn-uiconfig-customize"
     class="col-lg-6 col-lg-offset-6 gn-nopadding-right height-70-px"
   >
-    <div class="pull-right">
-      <label class="d-block" data-translate="">chooseOptionsToCustomize</label>
-      <select
-        class="form-control"
-        data-ng-options="o.label group by o.group for o in configOptions"
-        data-ng-model="optionsToAdd"
-      ></select>
-    </div>
+    <label class="d-block" data-translate="">chooseOptionsToCustomize</label>
+    <select
+      class="form-control"
+      data-ng-options="o.label group by o.group for o in configOptions"
+      data-ng-model="optionsToAdd"
+    ></select>
   </div>
 
   <p class="help-block" data-translate="">ui/config-help</p>

web-ui/src/main/resources/catalog/templates/admin/settings/ui.html

@@ -45,7 +45,7 @@
 
           <div class="row">
             <!-- add UI config -->
-            <div class="col-md-6 gn-nopadding-left">
+            <div class="col-lg-6 gn-nopadding-left">
               <div class="input-group">
                 <input
                   class="form-control"
@@ -70,16 +70,17 @@
             </div>
 
             <!-- delete and save-->
-            <div class="col-md-6 gn-nopadding-left gn-nopadding-right">
+            <div class="col-lg-6 gn-nopadding-left gn-nopadding-right">
               <div class="btn-toolbar pull-right">
                 <button
                   type="submit"
                   class="btn btn-default btn-danger"
                   id="gn-btn-settings-delete"
                   data-ng-disabled="!uiConfiguration"
                   data-ng-click="deleteUiConfig()"
+                  title="{{'deleteUiSettings'|translate}}"
                 >
-                  <span class="fa fa-times"></span>
+                  <span class="fa fa-fw fa-times"></span>
                   {{"deleteUiSettings"|translate}}
                 </button>
                 <button
@@ -88,8 +89,9 @@
                   id="gn-btn-settings-save"
                   data-ng-disabled="!gnSettings.$valid"
                   data-ng-click="updateUiConfig()"
+                  title="{{'saveSettings'|translate}}"
                 >
-                  <span class="fa fa-save"></span>
+                  <span class="fa fa-fw fa-save"></span>
                   {{"saveSettings"|translate}}
                 </button>
               </div>
@@ -104,7 +106,7 @@
       data-ng-show="uiConfiguration.configuration !== undefined"
     >
       <div class="panel-heading">
-        <h1><span data-translate="">ui</span> <strong>{{uiConfiguration.id}}</strong></h1>
+        <h1><span data-translate="" class="gn-margin-right-sm">ui</span> <strong>{{uiConfiguration.id}}</strong></h1>
 
         <div data-gn-need-help="user-interface-configuration" class="pull-right"></div>
       </div>

web-ui/src/main/resources/catalog/views/default/less/gn_admin_default.less

@@ -515,6 +515,18 @@ ul.gn-resultview li.list-group-item {
         margin-bottom: 10px;
         border-color: #ccc;
       }
+      .col-md-4, .col-md-6 {
+        @media (max-width: @screen-sm-max) {
+          padding-right: 0 !important;
+        }
+      }
+      .col-lg-6, #gn-uiconfig-customize {
+        @media (max-width: 1024px) {
+          padding-right: 0 !important;
+          margin-bottom: @gn-spacing;
+        }
+      }
+
       // checkbox (Bootstrap 5.2)
       input[type="checkbox"],
       input[type="radio"] {
@@ -656,7 +668,16 @@ ul.gn-resultview li.list-group-item {
         z-index: 901;
       }
       #gn-uiconfig-customize {
-        margin-top: -85px;
+
+        @media (max-width: @screen-md-max) {
+          padding-left: 0 !important;
+        }
+
+        @media (min-width: @screen-lg-min) {
+          margin-top: -85px;
+        }
+
+
         .dropdown-menu {
           padding: 0 !important;
           li {