Merge pull request openshift#12610 from sg00dwin/filter-input-placeho…

…lder-width-bug OCPBUGS-6762: Increase filter input width to accomodate placeholder text
miyamotoh · Mar 2, 2023 · 85fdfb9 · 85fdfb9
2 parents 898d6ce + b7fe6e5
commit 85fdfb9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/frontend/public/components/_filter-toolbar.scss b/frontend/public/components/_filter-toolbar.scss
@@ -22,6 +22,12 @@
   padding: 0 var(--pf-global--spacer--xs);
 }
 
+@media (min-width: $pf-global--breakpoint--md) {
+  .co-filter-group {
+    width: 350px !important; // enable full placeholder text to display
+  }
+}
+
 .co-filter-search--full-width {
   flex-grow: 1;
   .has-feedback {

diff --git a/frontend/public/components/filter-toolbar.tsx b/frontend/public/components/filter-toolbar.tsx
@@ -365,7 +365,7 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
                   }}
                   categoryName={translatedNameFilterTitle}
                 >
-                  <div className="pf-c-input-group">
+                  <div className="pf-c-input-group co-filter-group">
                     {!hideLabelFilter && (
                       <DropdownInternal
                         items={filterDropdownItems}