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);