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

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;

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;
 }

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;

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;
+}

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;
+}

scss/mac/_tag-selector.scss

@@ -11,5 +11,5 @@
   flex: none;
   border: 0;
   margin-right: 3px;
-  padding: 0 6px;
+  padding: 1px 6px 0;
 }

scss/zotero-react-client-mac.scss

@@ -5,4 +5,5 @@
 // --------------------------------------------------
 
 @import "mac/button";
+@import "mac/search";
 @import "mac/tag-selector";

scss/zotero-react-client-unix.scss

@@ -4,3 +4,4 @@
 // Linux specific
 // --------------------------------------------------
 
+@import "linux/search";

scss/zotero-react-client-win.scss

@@ -4,3 +4,5 @@
 // Windows specific
 // --------------------------------------------------
 
+@import "win/search";
+@import "win/tag-selector";