From 3f2e2a1ede173d6c04cdb51c89d94fb5b0b24b1c Mon Sep 17 00:00:00 2001
From: ndrooo <git@ndr.ooo>
Date: Fri, 9 Aug 2024 18:58:30 -0400
Subject: [PATCH] Reorganize search button DOM hierarchy

---
 quartz/components/Search.tsx         |  9 ++++-----
 quartz/components/styles/search.scss | 19 ++++++++-----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 93113d21e..23253aa6b 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -18,10 +18,9 @@ export default ((userOpts?: Partial<SearchOptions>) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (
-      <button class={classNames(displayClass, "search")} id="search-button">
-        <div id="search-icon">
+      <div class={classNames(displayClass, "search")}>
+        <button class="search-button" id="search-button">
           <p>{i18n(cfg.locale).components.search.title}</p>
-          <div></div>
           <svg
             role="img"
             xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +32,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
               <circle cx="8" cy="8" r="7" />
             </g>
           </svg>
-        </div>
+        </button>
         <div id="search-container">
           <div id="search-space">
             <input
@@ -47,7 +46,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
             <div id="search-layout" data-preview={opts.enablePreview}></div>
           </div>
         </div>
-      </button>
+      </div>
     )
   }
 
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 2bcb38bc1..cc2daca3b 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -1,28 +1,25 @@
 @use "../../styles/variables.scss" as *;
 
 .search {
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-size: inherit;
   min-width: fit-content;
   max-width: 14rem;
-  padding: 0;
   flex-grow: 0.3;
-  text-align: inherit;
 
-  & > #search-icon {
+  & > .search-button {
     background-color: var(--lightgray);
+    border: none;
     border-radius: 4px;
+    font-family: inherit;
+    font-size: inherit;
     height: 2rem;
+    padding: 0;
     display: flex;
     align-items: center;
+    text-align: inherit;
     cursor: pointer;
     white-space: nowrap;
-
-    & > div {
-      flex-grow: 1;
-    }
+    width: 100%;
+    justify-content: space-between;
 
     & > p {
       display: inline;