Set larger label-filter default input click targets based on

statdard media query widths

Author: sg00dwin

app/styles/_data-toolbar.less

@@ -1,6 +1,13 @@
 /* Data toolbar
    - Includes customizations for label filter input and active filter
 ---------------------------------------------------------------------------- */
+// @screen-md-min container width - (sidebar-left + left + right margin); 992 - (145 + 30 + 30) = 787
+@data-toolbar-filter-max-width:   (@screen-md-min - (@sidebar-left-width-md + @middle-content-container-padding-lg + @middle-content-container-padding-lg));
+@label-filter-default-input-lg: (@label-filter-default-input-md + 190); // 730px
+@label-filter-default-input-md: (@label-filter-default-input-sm + 140); // 540px
+@label-filter-default-input-sm: (@label-filter-default-input-xs + 160); // 400px
+@label-filter-default-input-xs: 240px; // 320 - (40 + 40); container - ((left + right margin) + button)
+
 
 .data-toolbar {
   padding: 5px 0;
@@ -26,13 +33,20 @@
       .flex(@columns: 1 1 0%);
     }
     @media (min-width: @screen-md-min) {
-      max-width: 600px;
+      max-width: @data-toolbar-filter-max-width;
     }
     .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input {
       &, & input {
         font-size: @font-size-base;
       }
     }
+    .label-filter-key .selectize-input.not-full {
+      // Increase default input click target
+      width: @label-filter-default-input-xs;
+      @media (min-width: @screen-xs-min) { width: @label-filter-default-input-sm;}
+      @media (min-width: @screen-sm-min) { width: @label-filter-default-input-md;}
+      @media (min-width: @screen-md-min) { width: @label-filter-default-input-lg;}
+    }
     .form-group {
       margin-bottom: 0;
     }

dist/styles/main.css

@@ -4035,9 +4035,16 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 .data-toolbar{padding:5px 0}
 .data-toolbar.other-resources-toolbar .data-toolbar-dropdown{min-width:210px}
 .data-toolbar .checkbox{margin-bottom:0;margin-top:10px}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:240px}
+@media (min-width:480px){.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:400px}
+}
 @media (min-width:768px){.data-toolbar{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
 .data-toolbar .checkbox{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;margin-left:20px;margin-top:3px;text-align:right}
 .data-toolbar .data-toolbar-filter{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:540px}
+}
+@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:772px}
+.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:730px}
 }
 .data-toolbar .data-toolbar-filter .form-group{margin-bottom:0}
 .data-toolbar .data-toolbar-views{-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;text-align:right}
@@ -4090,8 +4097,7 @@ h2+.list-view-pf{margin-top:20px}
 .list-view-pf-additional-info-item{display:inline-block;text-align:left}
 .list-view-pf-description{-ms-flex:1 0 55%;flex:1 0 55%}
 .list-view-pf-main-info{padding-bottom:10px;padding-top:10px}
-@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:600px}
-.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
+@media (min-width:992px){.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
 .list-view-pf-additional-info{width:40%}
 .list-view-pf-description{width:60%}
 }