From 1a72661224108a9af87644d5e826579a03c8615c Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 9 Sep 2024 12:23:22 +0200
Subject: [PATCH] Increase the default width of the filter input in the
 SubHeader

---
 .changeset/moody-ants-cover.md                     | 5 +++++
 app/components/primer/open_project/sub_header.pcss | 8 ++++++++
 app/components/primer/open_project/sub_header.rb   | 1 +
 3 files changed, 14 insertions(+)
 create mode 100644 .changeset/moody-ants-cover.md

diff --git a/.changeset/moody-ants-cover.md b/.changeset/moody-ants-cover.md
new file mode 100644
index 0000000000..e399c03967
--- /dev/null
+++ 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
index d1cd410874..2b80152a63 100644
--- 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
index 7bf4bafe18..35a15be651 100644
--- a/app/components/primer/open_project/sub_header.rb
+++ b/app/components/primer/open_project/sub_header.rb
@@ -43,6 +43,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"