Merge pull request #6530 from gnarlex/fix-sidebar-search-hitbox

Fix hitbox of sidebar search input

.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.

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -44,7 +44,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
     drawerWidthOpen,
     iconContainerWidth,
   } = sidebarConfig;
-
   return {
     root: {
       color: theme.palette.navigation.color,
@@ -97,6 +96,9 @@ const useStyles = makeStyles<BackstageTheme>(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,
+          }}
         />
       </SidebarItem>
     </div>