Set main window min-width/height dynamically (#3841)

Correctly calculates minimums when window is too small, so it grows
when the collection tree is made bigger.

chrome/content/zotero/standalone/standalone.js

@@ -75,7 +75,7 @@ const ZoteroStandalone = new function() {
 								this.switchReaderSubtype(subtype);
 							}
 						}
-						setTimeout(() => ZoteroPane.updateToolbarPosition(), 0);
+						setTimeout(() => ZoteroPane.updateLayoutConstraints(), 0);
 					}
 				}
 			},
@@ -512,7 +512,7 @@ const ZoteroStandalone = new function() {
 					document.getElementById('zotero-collections-splitter').setAttribute('state', 'collapsed');
 					collectionsPane.setAttribute('collapsed', true);
 				}
-				ZoteroPane.updateToolbarPosition();
+				ZoteroPane.updateLayoutConstraints();
 				break;
 			
 			case 'item-pane':
@@ -527,7 +527,7 @@ const ZoteroStandalone = new function() {
 					document.getElementById('zotero-items-splitter').setAttribute('state', 'collapsed');
 					itemPane.setAttribute('collapsed', true);
 				}
-				ZoteroPane.updateToolbarPosition();
+				ZoteroPane.updateLayoutConstraints();
 				break;
 			
 			case 'tag-selector':

chrome/content/zotero/zoteroPane.js

@@ -117,16 +117,15 @@ var ZoteroPane = new function()
 		Zotero.UIProperties.registerRoot(document.getElementById('zotero-context-pane'));
 		this.itemPane = document.querySelector("#zotero-item-pane");
 		ZoteroPane_Local.updateLayout();
-		ZoteroPane_Local.updateToolbarPosition();
 		this.updateWindow();
 		window.addEventListener("resize", () => {
 			this.updateWindow();
 			let tabsDeck = document.querySelector('#tabs-deck')
 			if (!tabsDeck || tabsDeck.getAttribute('selectedIndex') == 0) {
-				this.updateToolbarPosition();
+				this.updateLayoutConstraints();
 			}
 		});
-		window.setTimeout(this.updateToolbarPosition.bind(this), 0);
+		window.setTimeout(this.updateLayoutConstraints.bind(this), 0);
 		
 		Zotero.updateQuickSearchBox(document);
 		
@@ -768,7 +767,6 @@ var ZoteroPane = new function()
 
 		this.unserializePersist();
 		this.updateLayout();
-		this.updateToolbarPosition();
 		this.initContainers();
 		
 		// Focus the quicksearch on pane open
@@ -5988,15 +5986,17 @@ var ZoteroPane = new function()
 			itemsSplitter.setAttribute("orient", "vertical");
 			sidenav.classList.add("stacked");
 			this.itemPane.classList.add("stacked");
+			document.documentElement.classList.add("stacked");
 		}
-		else { // three-vertical-pane
+		else {  // three-vertical-pane
 			layoutSwitcher.setAttribute("orient", "horizontal");
 			itemsSplitter.setAttribute("orient", "horizontal");
 			sidenav.classList.remove("stacked");
 			this.itemPane.classList.remove("stacked");
+			document.documentElement.classList.remove("stacked");
 		}
 
-		this.updateToolbarPosition();
+		this.updateLayoutConstraints();
 		if (ZoteroPane.itemsView) {
 			// Need to immediately rerender the items here without any debouncing
 			// since tree height will have changed
@@ -6093,15 +6093,26 @@ var ZoteroPane = new function()
 	
 	
 	/**
-	 * Moves around the toolbar when the user moves around the pane
+	 * Update the window min-width/height, collections search width, tag selector, and sidenav
+	 * when the window or elements within it are resized.
 	 */
-	this.updateToolbarPosition = function () {
+	this.updateLayoutConstraints = function () {
 		var paneStack = document.getElementById("zotero-pane-stack");
 		if (paneStack.hidden) return;
 
+		var titlebar = document.getElementById('zotero-title-bar');
+		var trees = document.getElementById('zotero-trees');
+		var itemsPaneContainer = document.getElementById('zotero-items-pane-container');
 		var collectionsPane = document.getElementById("zotero-collections-pane");
 		var tagSelector = document.getElementById("zotero-tag-selector");
 		
+		// Calculate the heights of the components that aren't able to shrink automatically
+		// when the window is resized
+		let fixedComponentWidth = trees.scrollWidth - itemsPaneContainer.scrollWidth;
+		let fixedComponentHeight = titlebar.scrollHeight + trees.scrollHeight - itemsPaneContainer.scrollHeight;
+		document.documentElement.style.setProperty('--width-of-fixed-components', `${fixedComponentWidth}px`);
+		document.documentElement.style.setProperty('--height-of-fixed-components', `${fixedComponentHeight}px`);
+
 		var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width;
 		tagSelector.style.maxWidth = collectionsPaneWidth + 'px';
 		if (ZoteroPane.itemsView) {

chrome/content/zotero/zoteroPane.xhtml

@@ -1036,8 +1036,8 @@
 								
 								<splitter id="zotero-collections-splitter" resizebefore="closest" resizeafter="closest" collapse="before"
 									zotero-persist="state"
-									onmousemove="document.getElementById('zotero-items-toolbar').setAttribute('state', this.getAttribute('state'));ZoteroPane_Local.updateToolbarPosition();"
+									onmousemove="document.getElementById('zotero-items-toolbar').setAttribute('state', this.getAttribute('state'));ZoteroPane_Local.updateLayoutConstraints();"
-									oncommand="ZoteroPane_Local.updateToolbarPosition()">
+									oncommand="ZoteroPane_Local.updateLayoutConstraints()">
 									<grippy id="zotero-collections-grippy"/>
 								</splitter>
 								
@@ -1155,8 +1155,8 @@
 									
 				
 									<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" orient="horizontal" zotero-persist="state orient"
-										onmousemove="ZoteroPane.updateToolbarPosition()"
+										onmousemove="ZoteroPane.updateLayoutConstraints()"
-										oncommand="ZoteroPane.updateToolbarPosition()">
+										oncommand="ZoteroPane.updateLayoutConstraints()">
 										<grippy id="zotero-items-grippy"/>
 									</splitter>
 				

chrome/skin/default/zotero/overlay.css

@@ -174,18 +174,21 @@ TODO: Replace with SVG
 	text-decoration: underline;
 }
 
-#zotero-layout-switcher
-{
-	min-width: 560px;
-}
-
 /*
-	Fx115: make panes occupy all availabel width/height after layout switch
+	Fx115: make panes occupy all available width/height after layout switch
+	or splitter expand/collapse.
+	The splitter element stores state in the style attribute's width/height
+	properties, and if we remove them, the splitter breaks. So we override
+	them here with !important.
 */
 #zotero-layout-switcher[orient="horizontal"] :is(#zotero-items-pane-container, #zotero-item-pane) {
 	height: auto !important;
 }
 
+#zotero-layout-switcher[orient="horizontal"] #zotero-items-pane-container {
+	width: auto !important;
+}
+
 #zotero-layout-switcher[orient="vertical"],
 #zotero-layout-switcher[orient="vertical"] :is(#zotero-items-pane-container, #zotero-item-pane) {
 	width: auto !important;

scss/abstracts/_variables.scss

@@ -107,8 +107,12 @@ $tagColorsLookup: (
 
 // Layout constants
 // --------------------------------------------------
+$min-width-tabs-deck: 570px;
 $min-width-collections-pane: 200px;
 $min-width-items-pane: 370px;
 $min-width-item-pane: 300px;
 $min-width-context-pane: 300px;
 $width-sidenav: 37px;
+
+$height-toolbar: 41px;
+$min-height-items-pane: 150px;

scss/components/_contextPane.scss

@@ -1,5 +1,5 @@
 #tabs-deck {
-	min-width: $min-width-collections-pane + $min-width-items-pane;
+	min-width: $min-width-tabs-deck;
 
 	& > :not(.deck-selected) {
 		// Hide all sub-trees that are in the invisible tab deck

scss/components/_item-tree.scss

@@ -3,7 +3,7 @@
 #zotero-items-pane-container {
 	min-width: $min-width-items-pane;
 	height: 150px;
-	min-height: 200px;
+	min-height: $min-height-items-pane;
 }
 
 #zotero-items-pane {

scss/components/_mainWindow.scss

@@ -3,10 +3,14 @@
 }
 
 #main-window {
-	min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav;
+	min-width: max(var(--width-of-fixed-components) + $min-width-items-pane, $min-width-tabs-deck);
 	min-height: 300px;
 }
 
+#main-window.stacked {
+	min-height: calc(var(--height-of-fixed-components) + $min-height-items-pane + $height-toolbar);
+}
+
 #zotero-pane {
 	min-width: 0;
 	min-height: 0;

scss/components/_toolbar.scss

@@ -1,6 +1,6 @@
 .toolbar {
-	height: 41px !important; /* Hard-code this to fix toolbar icon compression on Linux */
+	height: $height-toolbar !important; /* Hard-code this to fix toolbar icon compression on Linux */
-	min-height: 41px; /* Needed to prevent squashing by stretched tag selector */
+	min-height: $height-toolbar; /* Needed to prevent squashing by stretched tag selector */
 	margin: 0;
 	padding: 0px 8px 0px 8px;
 	min-width: 1px;
@@ -121,4 +121,4 @@ toolbox {
 		background: Menu;
 		appearance: initial;
 	}
-}
+}