Fixes: Runners search input placeholder is cut off

7 files changed, 16 insertions, 29 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2c30311b1c1..1fb4e3ec761 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 66dbe403385..937638d50e8 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/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;
       }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b5505538541..b8ea8ee14c5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 3422829de58..d5ae141dd7e 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/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;
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index dd0cb2c2613..53d021086bf 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/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;
 
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 1a3b5e58ed5..e49bf1cffc8 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/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
diff --git a/changelogs/unreleased/39710-search-placeholder-cut-off.yml b/changelogs/unreleased/39710-search-placeholder-cut-off.yml
new file mode 100644
index 00000000000..59290768c6a
--- /dev/null
+++ b/changelogs/unreleased/39710-search-placeholder-cut-off.yml
@@ -0,0 +1,5 @@
+---
+title: 'Fixes: Runners search input placeholder is cut off'
+merge_request: 19015
+author: Jacopo Beschi @jacopo-beschi
+type: fixed