Merge pull request #184 from opf/fix/increase-default-width-of-subhea…

…der-search Increase the default width of the filter input in the SubHeader
opf · Sep 10, 2024 · 0124a9d · 0124a9d
2 parents 95adbb8 + 1a72661
commit 0124a9d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/moody-ants-cover.md b/.changeset/moody-ants-cover.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Increase default width of the filter input in the SubHeader
diff --git a/app/components/primer/open_project/sub_header.pcss b/app/components/primer/open_project/sub_header.pcss
@@ -34,6 +34,14 @@
     align-items: center;
     width: 100%;
     gap: 12px;
+
+    /* Since the container is not full width (due to the grid around it)
+     we want it to grow, and then be limited by the max-width of the "FormControl-input-width--xy" class */
+    & [class*='FormControl-input-width--'] {
+        &:not(.FormControl-input-width--auto) {
+            width: 100vw;
+        }
+    }
 }
 
 .SubHeader-filterContainer {

diff --git a/app/components/primer/open_project/sub_header.rb b/app/components/primer/open_project/sub_header.rb
@@ -44,6 +44,7 @@ class SubHeader < Primer::Component
         system_arguments[:placeholder] ||= I18n.t("button_filter")
         system_arguments[:leading_visual] ||= { icon: :search }
         system_arguments[:visually_hide_label] ||= true
+        system_arguments[:input_width] ||= :medium
 
         system_arguments[:data] ||= {}
         system_arguments[:data][:target]= "sub-header.filterInput"