From f0ecaf43ea70e36efee64ecf4738c77f876d1be4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Mon, 30 Sep 2024 18:18:38 +0200
Subject: [PATCH] Remove default Webkit search cancel button

Fixes newly introduced bug where it was visible in the new 404 page. We
now remove it everywhere across the site in a single place.
---
 .../grapher/src/entitySelector/EntitySelector.scss          | 4 ----
 site/owid.scss                                              | 6 ++++++
 site/search/Search.scss                                     | 4 ----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
index 5384464ce25..adc102b4bb6 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -89,10 +89,6 @@
                 &:focus-visible {
                     border: $focus;
                 }
-
-                &::-webkit-search-cancel-button {
-                    -webkit-appearance: none;
-                }
             }
 
             &.search-input--empty {
diff --git a/site/owid.scss b/site/owid.scss
index 5dd04a78069..8fd0f03c87d 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -122,6 +122,12 @@
 @import "css/donate.scss";
 @import "./ThankYouPage.scss";
 
+// Remove default Webkit search cancel button.
+// https://stackoverflow.com/a/77190241/9846837
+[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
 /* HACK (Mispy): Fix search autozooming on iPhone Safari.
 http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
diff --git a/site/search/Search.scss b/site/search/Search.scss
index c568e13627a..beb559bdf0f 100644
--- a/site/search/Search.scss
+++ b/site/search/Search.scss
@@ -48,10 +48,6 @@ $reset-button-margin: 16px;
     border: none;
     outline: $blue-20 1px solid;
     outline-offset: 0px;
-
-    &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-    }
 }
 
 .search-panel-reset-button {