From 1a82ae5c3bb23ea80f144bdd9760c030d7436e5a Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Wed, 24 Jan 2024 16:46:19 -0500
Subject: [PATCH] collection filter sizing tweaks

- ensure filter field is hidden if the pane is collapsed
- JS-based max-width setting to prevent overflow outside of collection pane
---
 chrome/content/zotero/zoteroPane.js | 19 +++++++++++++++++++
 scss/components/_toolbar.scss       |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index 1f251676b8..1fba8b7b15 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -1093,6 +1093,7 @@ var ZoteroPane = new function()
 			setTimeout(() => {
 				collectionSearchButton.style.display = '';
 				collectionSearchField.style.visibility = 'hidden';
+				collectionSearchField.style.removeProperty('max-width');
 			}, 50);
 		}
 	}
@@ -1105,6 +1106,11 @@ var ZoteroPane = new function()
 		collectionSearchButton.addEventListener("click", (_) => {
 			if (!collectionSearchField.classList.contains("visible")) {
 				collectionSearchButton.style.display = 'none';
+				// If the collectionPane is narrow, set smaller max-width
+				let maxWidth = collectionSearchField.getAttribute("data-expanded-width");
+				if (maxWidth) {
+					collectionSearchField.style.maxWidth = `${maxWidth}px`;
+				}
 				collectionSearchField.style.visibility = 'visible';
 				collectionSearchField.classList.add("visible", "expanding");
 				// Enable and focus the field only after it was revealed to prevent the cursor
@@ -6413,6 +6419,19 @@ var ZoteroPane = new function()
 		if (ZoteroPane.itemsView) {
 			ZoteroPane.itemsView.updateHeight();
 		}
+		// Temp JS solution to shrink the collection search so that it does not overflow outside
+		// of the collection pane
+		var collectionSearch = document.getElementById("zotero-collections-search");
+		collectionSearch.removeAttribute("data-expanded-width");
+		if (collectionsPaneWidth < 220) {
+			collectionSearch.setAttribute("data-expanded-width", 150);
+			if (collectionSearch.classList.contains("visible")) {
+				collectionSearch.style.maxWidth = "150px";
+			}
+		}
+		else {
+			collectionSearch.style.removeProperty('max-width');
+		}
 		
 		this.handleTagSelectorResize();
 		
diff --git a/scss/components/_toolbar.scss b/scss/components/_toolbar.scss
index 9a5c68eb06..a96907f882 100644
--- a/scss/components/_toolbar.scss
+++ b/scss/components/_toolbar.scss
@@ -84,7 +84,7 @@
 
 /* Hide collection search on pane collapse, otherwise it still shows when focused */
 #zotero-collections-pane[collapsed=true] #zotero-collections-search.visible {
-	visibility: hidden;
+	display: none;
 }
 
 /* Hide the add button on pane collapse. Otherwise, it may show on top of 'New Item' */