From dedbe4f854228cc725a6b20d904d83958ca98227 Mon Sep 17 00:00:00 2001
From: Mike Kruskal <mkruskal@google.com>
Date: Wed, 28 Sep 2022 16:41:36 -0700
Subject: [PATCH] Fixing magnifying glass icon handling in search bar

---
 assets/scss/_search.scss           | 29 ++++++++++++++++++++++++++---
 layouts/partials/search-input.html |  5 ++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 4c8fe88ee1..79386afffc 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -1,8 +1,13 @@
 // Search
-
-.td-search-input {
+.td-search-wrapper {
+    position: relative;
     background: transparent;
     max-width: 90%;
+}
+
+.td-search-wrapper .td-search-input {
+    width: 100%;
+    text-indent: 1.25em;
 
     &.form-control:focus {
         border-color: lighten($primary, 60%);
@@ -14,7 +19,25 @@
         border-radius: 1rem;
     }
 
-    font-family: $font-family-base, $font-awesome-font-name;
+    font-family: $font-family-base;
+}
+
+.td-search-wrapper .fa {
+    // Make this consistent with placeholder formatting.
+    color: $input-placeholder-color;
+
+    // Vertically center the content.
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    height: 100%;
+
+    // Position this on the left of the input.
+    position: absolute;
+    left: 0.75em;
+
+    // Click-through to the underlying input.
+    pointer-events: none;
 }
 
 .popover.offline-search-result {
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
index 22e9002477..86eb0c1706 100644
--- a/layouts/partials/search-input.html
+++ b/layouts/partials/search-input.html
@@ -1,5 +1,8 @@
 {{ if .Site.Params.gcs_engine_id -}}
-<input type="search" class="form-control td-search-input" placeholder="&#xf002; {{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+<div class="td-search-wrapper">
+<i class="fa fa-search"></i>
+<input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+</div>
 {{ else if .Site.Params.algolia_docsearch -}}
 <div id="docsearch"></div>
 {{ else if .Site.Params.offlineSearch -}}