From c94f8e089cc4276c091c2d025d08581f56cdd435 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Mon, 2 Jun 2025 11:38:25 +0200
Subject: [PATCH] (canon)fix: use full menu width for combobox menu filter
 input.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/tired-readers-share.md                  | 5 +++++
 packages/canon/css/components.css                  | 1 +
 packages/canon/css/menu.css                        | 1 +
 packages/canon/css/styles.css                      | 1 +
 packages/canon/src/components/Menu/Menu.styles.css | 1 +
 5 files changed, 9 insertions(+)
 create mode 100644 .changeset/tired-readers-share.md

diff --git a/.changeset/tired-readers-share.md b/.changeset/tired-readers-share.md
new file mode 100644
index 0000000000..148ebd635d
--- /dev/null
+++ b/.changeset/tired-readers-share.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+The filter input in menu comboboxes should now always use the full width of the menu it's in.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 1b60bf74ed..4ea92e4d86 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -903,6 +903,7 @@
   border: none;
   border-bottom: 1px solid var(--canon-border);
   background-color: var(--canon-bg-surface-1);
+  width: 100%;
   height: 32px;
   color: var(--canon-fg-primary);
   line-height: 140%;
diff --git a/packages/canon/css/menu.css b/packages/canon/css/menu.css
index 4c9433275c..7035fab12b 100644
--- a/packages/canon/css/menu.css
+++ b/packages/canon/css/menu.css
@@ -94,6 +94,7 @@
   border: none;
   border-bottom: 1px solid var(--canon-border);
   background-color: var(--canon-bg-surface-1);
+  width: 100%;
   height: 32px;
   color: var(--canon-fg-primary);
   line-height: 140%;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 83329e817c..0bb27fbd56 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -10127,6 +10127,7 @@
   border: none;
   border-bottom: 1px solid var(--canon-border);
   background-color: var(--canon-bg-surface-1);
+  width: 100%;
   height: 32px;
   color: var(--canon-fg-primary);
   line-height: 140%;
diff --git a/packages/canon/src/components/Menu/Menu.styles.css b/packages/canon/src/components/Menu/Menu.styles.css
index 07d257f57f..7ccaa7a634 100644
--- a/packages/canon/src/components/Menu/Menu.styles.css
+++ b/packages/canon/src/components/Menu/Menu.styles.css
@@ -93,6 +93,7 @@
 
 .canon-SubmenuComboboxSearch {
   padding-inline: var(--canon-space-3);
+  width: 100%;
   height: 32px;
   border: none;
   border-bottom: 1px solid var(--canon-border);