diff --git a/.changeset/chilled-cars-cough.md b/.changeset/chilled-cars-cough.md new file mode 100644 index 0000000000..b6406fcab1 --- /dev/null +++ b/.changeset/chilled-cars-cough.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Increase the vertical padding of the sidebar search input field to match the height of the parent anchor tag. This prevents users from accidentally navigating to the search page when they actually wanted to use the search input directly. diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 28abbce53c..3944df0b50 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -44,7 +44,6 @@ const useStyles = makeStyles(theme => { drawerWidthOpen, iconContainerWidth, } = sidebarConfig; - return { root: { color: theme.palette.navigation.color, @@ -97,6 +96,9 @@ const useStyles = makeStyles(theme => { fontWeight: 'bold', fontSize: theme.typography.fontSize, }, + searchFieldHTMLInput: { + padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`, + }, searchContainer: { width: drawerWidthOpen - iconContainerWidth, }, @@ -271,6 +273,9 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => { disableUnderline: true, className: classes.searchField, }} + inputProps={{ + className: classes.searchFieldHTMLInput, + }} />