From 3126c58d30b2ba8c202722b91fae48161208644f Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Fri, 29 Mar 2019 01:45:32 -0400
Subject: [PATCH] Tag selector UI tweaks

- Don't cut off bottom of tags on Windows
- Fix appearance of search bar on Windows/Linux
- Fix cancel button on Windows/Linux
- Don't cut off right-hand pane of bottom bar when narrowing pane
---
 .../content/zotero/components/tag-selector/tag-list.jsx  | 1 +
 scss/components/_search.scss                             | 7 +------
 scss/components/_tag-selector.scss                       | 2 +-
 scss/linux/_search.scss                                  | 6 ++++++
 scss/mac/_search.scss                                    | 9 +++++++++
 scss/mac/_tag-selector.scss                              | 2 +-
 scss/zotero-react-client-mac.scss                        | 1 +
 scss/zotero-react-client-unix.scss                       | 1 +
 scss/zotero-react-client-win.scss                        | 2 ++
 9 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 scss/linux/_search.scss
 create mode 100644 scss/mac/_search.scss

diff --git a/chrome/content/zotero/components/tag-selector/tag-list.jsx b/chrome/content/zotero/components/tag-selector/tag-list.jsx
index 7fc3666ed6..a582cb7e1b 100644
--- a/chrome/content/zotero/components/tag-selector/tag-list.jsx
+++ b/chrome/content/zotero/components/tag-selector/tag-list.jsx
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const { FormattedMessage } = require('react-intl');
 var { Collection } = require('react-virtualized');
 
+// See also .tag-selector-item in _tag-selector.scss
 var filterBarHeight = 32;
 var tagPaddingTop = 4;
 var tagPaddingLeft = 2;
diff --git a/scss/components/_search.scss b/scss/components/_search.scss
index e53f618027..bc950ee307 100644
--- a/scss/components/_search.scss
+++ b/scss/components/_search.scss
@@ -1,21 +1,16 @@
 .search {
 	position: relative;
+	min-width: 40px;
 }
 
 .search input {
-	-moz-appearance: searchfield;
 	flex: 1 0;
 	min-width: 40px;
-	height: 24px;
 	padding-left: 4px;
 }
 
 .search .search-cancel-button {
-	background-image: url(chrome://global/skin/icons/searchfield-cancel.svg);
 	position: absolute;
-	width: 14px;
-	height: 14px;
-	top: 6px;
 	right: 6px;
 	cursor: default;
 }
\ No newline at end of file
diff --git a/scss/components/_tag-selector.scss b/scss/components/_tag-selector.scss
index 3978815fa5..1b4c844d2c 100644
--- a/scss/components/_tag-selector.scss
+++ b/scss/components/_tag-selector.scss
@@ -74,7 +74,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: pre;
-	padding: 1px 4px 3px;
+	padding: 1px 4px 3px; // See also tag-list.jsx
 
 	&.colored {
 		font-weight: bold;
diff --git a/scss/linux/_search.scss b/scss/linux/_search.scss
new file mode 100644
index 0000000000..51bd3c60df
--- /dev/null
+++ b/scss/linux/_search.scss
@@ -0,0 +1,6 @@
+.search .search-cancel-button {
+	background-image: url(chrome://global/skin/icons/input-clear.svg);
+	width: 14px;
+	height: 14px;
+	top: 8px;
+}
diff --git a/scss/mac/_search.scss b/scss/mac/_search.scss
new file mode 100644
index 0000000000..24f72560fc
--- /dev/null
+++ b/scss/mac/_search.scss
@@ -0,0 +1,9 @@
+.search input {
+	-moz-appearance: searchfield;
+	height: 24px;
+}
+
+.search .search-cancel-button {
+	background-image: url(chrome://global/skin/icons/searchfield-cancel.svg);
+	top: 6px;
+}
diff --git a/scss/mac/_tag-selector.scss b/scss/mac/_tag-selector.scss
index 548b8a1d43..79b10b1f06 100644
--- a/scss/mac/_tag-selector.scss
+++ b/scss/mac/_tag-selector.scss
@@ -11,5 +11,5 @@
   flex: none;
   border: 0;
   margin-right: 3px;
-  padding: 0 6px;
+  padding: 1px 6px 0;
 }
diff --git a/scss/zotero-react-client-mac.scss b/scss/zotero-react-client-mac.scss
index 5273bbd65a..9b0f43b01f 100644
--- a/scss/zotero-react-client-mac.scss
+++ b/scss/zotero-react-client-mac.scss
@@ -5,4 +5,5 @@
 // --------------------------------------------------
 
 @import "mac/button";
+@import "mac/search";
 @import "mac/tag-selector";
diff --git a/scss/zotero-react-client-unix.scss b/scss/zotero-react-client-unix.scss
index ab6d0c925f..919bd44533 100644
--- a/scss/zotero-react-client-unix.scss
+++ b/scss/zotero-react-client-unix.scss
@@ -4,3 +4,4 @@
 // Linux specific
 // --------------------------------------------------
 
+@import "linux/search";
diff --git a/scss/zotero-react-client-win.scss b/scss/zotero-react-client-win.scss
index 4ce4b848c7..8bb667a9c4 100644
--- a/scss/zotero-react-client-win.scss
+++ b/scss/zotero-react-client-win.scss
@@ -4,3 +4,5 @@
 // Windows specific
 // --------------------------------------------------
 
+@import "win/search";
+@import "win/tag-selector";