SearchInput+IconGrid: scroll to top of grid on search change

When the debounced search query changes, scroll to the top of the grid
if the query is not the empty string. This has the same smooth behavior
as the scroll buttons, which is not currently available on WebKit.

src/components/IconGrid/IconGrid.css

@@ -155,3 +155,8 @@
   padding: 0 16px 4px;
   min-height: 80vh;
 }
+
+.beacon {
+  position: relative;
+  top: -64px;
+}

src/components/IconGrid/IconGrid.tsx

@@ -39,6 +39,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
         className="grid-container"
         style={{ backgroundColor: isDark ? "#35313D" : "" }}
       >
+        <i id="beacon" className="beacon" />
         <motion.div
           className="grid"
           initial="hidden"

src/components/SearchInput/SearchInput.tsx

@@ -13,7 +13,17 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   const [query, setQuery] = useRecoilState(searchQueryAtom);
   void query;
 
-  const [isReady] = useDebounce(() => setQuery(value), 250, [value]);
+  const [isReady] = useDebounce(
+    () => {
+      setQuery(value);
+      value &&
+        void document
+          .getElementById("beacon")
+          ?.scrollIntoView({ block: "start", behavior: "smooth" });
+    },
+    250,
+    [value]
+  );
 
   const handleCancelSearch = () => {
     setValue("");