Merge branch '39710-search-placeholder-cut-off' into 'master'

Resolve "Runners search input placeholder is cut off"

Closes #39710

See merge request gitlab-org/gitlab-ce!19015

app/assets/stylesheets/framework/forms.scss

@@ -120,6 +120,14 @@ label {
   @include box-shadow(none);
   border-radius: 2px;
   padding: $gl-vert-padding $gl-input-padding;
+
+  &.input-short {
+    width: $input-short-width;
+
+    @media (min-width: $screen-md-min) {
+      width: $input-short-md-width;
+    }
+  }
 }
 
 .select-wrapper {

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -128,14 +128,6 @@
 
       /* Large devices (large desktops, 1200px and up) */
       @media (min-width: $screen-lg-min) { width: 250px; }
-
-      &.input-short {
-        /* Medium devices (desktops, 992px and up) */
-        @media (min-width: $screen-md-min) { width: 170px; }
-
-        /* Large devices (large desktops, 1200px and up) */
-        @media (min-width: $screen-lg-min) { width: 210px; }
-      }
     }
 
     @media (max-width: $screen-xs-max) {
@@ -164,10 +156,6 @@
         }
       }
 
-      .input-short {
-        width: 100%;
-      }
-
       .icon-label {
         display: inline-block;
       }

app/assets/stylesheets/framework/variables.scss

@@ -554,6 +554,8 @@ $input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
+$input-short-width: 200px;
+$input-short-md-width: 280px;
 
 /*
 * Help

app/assets/stylesheets/pages/members.scss

@@ -99,16 +99,6 @@
     @media (min-width: $screen-sm-min) {
       width: 250px;
     }
-
-    &.input-short {
-      @media (min-width: $screen-md-min) {
-        width: 170px;
-      }
-
-      @media (min-width: $screen-lg-min) {
-        width: 210px;
-      }
-    }
   }
 }
 

app/assets/stylesheets/pages/projects.scss

@@ -871,12 +871,6 @@ pre.light-well {
   margin: 0;
 }
 
-.commits-search-form {
-  .input-short {
-    min-width: 200px;
-  }
-}
-
 .git-clone-holder {
   width: 380px;
 

app/views/admin/runners/index.html.haml

@@ -45,7 +45,7 @@
     .pull-left
       = form_tag admin_runners_path, id: 'runners-search', class: 'form-inline', method: :get do
         .form-group
-          = search_field_tag :search, params[:search], class: 'form-control', placeholder: 'Runner description or token', spellcheck: false
+          = search_field_tag :search, params[:search], class: 'form-control input-short', placeholder: 'Runner description or token', spellcheck: false
         = submit_tag 'Search', class: 'btn'
 
     .pull-right.light

changelogs/unreleased/39710-search-placeholder-cut-off.yml

+---
+title: 'Fixes: Runners search input placeholder is cut off'
+merge_request: 19015
+author: Jacopo Beschi @jacopo-beschi
+type: fixed