Fix bg color bug in homepage search field

This has been bugging me for a while lol, the background was leaking out of the corners!

I had applied the styles to the `InputGroup` because I didn't realize how Chakra implements this… I had assumed that the left/right elements wouldn't also get the background.

But it turns out, `InputGroup` uses `position: absolute` stuff, and uses padding to create visual space in the `Input` below them! So, this works perfect!

src/app/HomePage.js

@@ -336,16 +336,14 @@ function ItemsSearchField() {
         }
       }}
     >
-      <InputGroup
-        size="sm"
-        backgroundColor={query ? brightBackground : "transparent"}
-        _focusWithin={{ backgroundColor: brightBackground }}
-      >
+      <InputGroup size="sm">
         <InputLeftElement pointerEvents="none">
           <SearchIcon color="gray.400" />
         </InputLeftElement>
         <Input
           value={query}
+          backgroundColor={query ? brightBackground : "transparent"}
+          _focus={{ backgroundColor: brightBackground }}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Search all items…"
           borderRadius="full"