From 9a30b8c43f80792d173e821d44d4aed9cdc070ed Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 8 Jun 2021 00:20:23 -0700
Subject: [PATCH] Fix bg color bug in homepage search field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index ef7e2d9..3fe4404 100644
--- a/src/app/HomePage.js
+++ b/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"