From 3bdcf34a8966e0ba78ac3c2d328c609e01546a36 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Tue, 23 Jan 2024 16:57:16 +0800
Subject: [PATCH] Fix stacked mode layout when toggle item pane

---
 chrome/content/zotero/zoteroPane.js    | 36 ++++++++++++++------------
 chrome/skin/default/zotero/overlay.css |  2 ++
 scss/components/_splitter.scss         | 24 ++++++++++++-----
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index e1ee34c032..51051909ee 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -1973,24 +1973,26 @@ var ZoteroPane = new function()
 				}
 			}
 
-			let isStackedMode = Zotero.Prefs.get("layout") === "stacked";
-			const sidenavSize = 37;
-			if (hideSidenav && !sidenav.hidden) {
-				sidenav.hidden = true;
-				if (isStackedMode) {
-					pane.height = `${(pane.clientHeight) + sidenavSize}`;
+			if (!document.querySelector("#zotero-items-splitter").collapsed) {
+				let isStackedMode = Zotero.Prefs.get("layout") === "stacked";
+				const sidenavSize = 37;
+				if (hideSidenav && !sidenav.hidden) {
+					sidenav.hidden = true;
+					if (isStackedMode) {
+						pane.height = `${(pane.clientHeight) + sidenavSize}`;
+					}
+					else {
+						pane.width = `${(pane.clientWidth) + sidenavSize}`;
+					}
 				}
-				else {
-					pane.width = `${(pane.clientWidth) + sidenavSize}`;
-				}
-			}
-			else if (!hideSidenav && sidenav.hidden) {
-				sidenav.hidden = false;
-				if (isStackedMode) {
-					pane.height = `${(pane.clientHeight) - sidenavSize}`;
-				}
-				else {
-					pane.width = `${(pane.clientWidth) - sidenavSize}`;
+				else if (!hideSidenav && sidenav.hidden) {
+					sidenav.hidden = false;
+					if (isStackedMode) {
+						pane.height = `${(pane.clientHeight) - sidenavSize}`;
+					}
+					else {
+						pane.width = `${(pane.clientWidth) - sidenavSize}`;
+					}
 				}
 			}
 			
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 3f962cbe4a..30c56168ed 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -186,6 +186,8 @@
 {
 	width: 342px;
 	min-width: 342px;
+	/* Need a min height to prevent layout issues in stacked mode */
+	min-height: 168px;
 }
 
 #zotero-layout-switcher
diff --git a/scss/components/_splitter.scss b/scss/components/_splitter.scss
index 1952bda6f2..47dcb76647 100644
--- a/scss/components/_splitter.scss
+++ b/scss/components/_splitter.scss
@@ -69,11 +69,23 @@ splitter {
 }
 
 #zotero-items-splitter,
-#zotero-context-splitter {
-	@include splitter-invisible-size(right);
-	&[state="collapsed"] {
-		--draggable-size: 1px;
-		border: 0;
-		margin-left: -1px;
+#zotero-context-splitter,
+#zotero-context-splitter-stacked {
+	&[orient=vertical] {
+		&[state="collapsed"] {
+			margin-bottom: -1px;
+			--draggable-size: 1px;
+			border: 0;
+		}
+	}
+
+	&:not([orient=vertical]) {
+		@include splitter-invisible-size(right);
+
+		&[state="collapsed"] {
+			margin-right: -1px;
+			--draggable-size: 1px;
+			border: 0;
+		}
 	}
 }