From 129938c8feb9468434c78c7e12c52cf72a3da514 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:01:59 +0800
Subject: [PATCH] Fix quick search styling (#4501)

fix: #4497
fix: #4498
---
 .../content/zotero/elements/quickSearchTextbox.js   |  3 +++
 scss/elements/_quickSearchTextbox.scss              | 13 +++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/chrome/content/zotero/elements/quickSearchTextbox.js b/chrome/content/zotero/elements/quickSearchTextbox.js
index d2dbbc870f..58ce7e3727 100644
--- a/chrome/content/zotero/elements/quickSearchTextbox.js
+++ b/chrome/content/zotero/elements/quickSearchTextbox.js
@@ -88,6 +88,8 @@
 
 			let searchBox = document.createXULElement("search-textbox");
 			searchBox.id = "zotero-tb-search-textbox";
+			// Enable applying styles to the input field
+			searchBox.inputField.setAttribute("part", "search-input");
 			this.searchTextbox = searchBox;
 			
 			wrapper.appendChild(dropmarkerHost);
@@ -110,6 +112,7 @@
 
 			let popup = document.createXULElement('menupopup');
 			popup.id = "search-mode-popup";
+			popup.toggleAttribute("needsgutter", true);
 
 			for (let [mode, label] of Object.entries(this._searchModes)) {
 				let item = document.createXULElement('menuitem');
diff --git a/scss/elements/_quickSearchTextbox.scss b/scss/elements/_quickSearchTextbox.scss
index 839e90af65..47eb25d128 100644
--- a/scss/elements/_quickSearchTextbox.scss
+++ b/scss/elements/_quickSearchTextbox.scss
@@ -14,11 +14,16 @@ quick-search-textbox {
 	:is(search-textbox)::part(search-icon) {
 		@include svgicon-menu("magnifier", "universal", "16");
 		color: var(--fill-secondary);
-		// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding
+		// right: 4px gap + 2px padding + 8px dropmarker width + 4px padding
+		// left, top, and bottom: 5px padding (6px on Figma, including 1px search-textbox border)
 		// Use explicit left/right padding here because this element is flipped in RTL (see _search.scss)
-		padding: 6px 14px 6px 6px;
+		padding: 5px 18px 5px 5px;
 		margin: 0;
 	}
+
+	:is(search-textbox)::part(search-input) {
+		padding: 0;
+	}
 }
 
 #zotero-tb-search-dropmarker {
@@ -33,9 +38,9 @@ quick-search-textbox {
 	width: 36px;
 	height: 28px;
 	min-height: 28px;
-	// 6px padding + 16px icon width + 2px padding
 	padding-block: 0;
-	padding-inline: 24px 4px;
+	// inline-start: 6px padding + 16px icon width + 2px padding - 1px outer border
+	padding-inline: 23px 4px !important;
 	margin: 0;
 	border: 0;
 	border-radius: 5px;