Prevent window overflow in Standard mode

chrome/content/zotero/standalone/basicViewer.xhtml

@@ -27,7 +27,6 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero/skin/standalone.css" type="text/css"?>
 <?xul-overlay href="chrome://zotero/content/standalone/editMenuOverlay.xul"?>
 <?xul-overlay href="chrome://zotero-platform/content/standalone/menuOverlay.xul"?>
 

chrome/content/zotero/zoteroPane.xhtml

@@ -27,7 +27,6 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero/skin/standalone.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>

chrome/skin/default/zotero/overlay.css

@@ -4,12 +4,6 @@
 	overflow: hidden;
 }
 
-#zotero-collections-pane
-{
-	min-width: 250px;
-	width: 250px;
-}
-
 #zotero-items-tree treechildren::-moz-tree-image(hasAttachment, pie)
 {
 	margin: 1px 0 0;
@@ -182,14 +176,6 @@
 	text-decoration: underline;
 }
 
-#zotero-item-pane
-{
-	width: 342px;
-	min-width: 342px;
-	/* Need a min height to prevent layout issues in stacked mode */
-	min-height: 168px;
-}
-
 #zotero-layout-switcher
 {
 	height: 0;

chrome/skin/default/zotero/standalone.css

@@ -1,4 +0,0 @@
-#main-window {
-	min-width: 670px;
-	min-height: 300px;
-}

scss/_zotero.scss

@@ -58,6 +58,7 @@
 @import "components/tabsMenu";
 @import "components/newCollectionDialog";
 @import "components/reader";
+@import "components/itemPane";
 
 // Elements
 // --------------------------------------------------

scss/abstracts/_variables.scss

@@ -104,3 +104,10 @@ $tagColorsLookup: (
 	'#a28ae5': --tag-purple,
 	'#a6507b': --tag-plum,
 );
+
+// Layout constants
+// --------------------------------------------------
+$min-width-collections-pane: 200px;
+$min-width-items-pane: 370px;
+$min-width-item-pane: 300px;
+$width-sidenav: 37px;

scss/base/_base.scss

@@ -25,17 +25,6 @@
     background: var(--material-sidepane);
 }
 
-#zotero-items-pane-container {
-    min-width: 370px;
-}
-
-#zotero-items-pane {
-    min-width: 370px;
-    min-height: 150px;
-    height: 150px;
-    width: 290px;
-}
-
 #zotero-title-bar {
     border-bottom: var(--material-panedivider);
 }

scss/components/_collection-tree.scss

@@ -11,6 +11,11 @@ $icons: (
 	}
 }
 
+#zotero-collections-pane {
+	min-width: $min-width-collections-pane;
+	width: $min-width-collections-pane;
+}
+
 #zotero-collections-tree-container {
 	height: 5.2em;
 }

scss/components/_contextPane.scss

@@ -1,10 +1,10 @@
 #tabs-deck {
-	min-width: 600px;
+	min-width: $min-width-collections-pane + $min-width-items-pane;
 }
 
 #zotero-context-pane {
 	display: flex;
-	min-width: 360px;
+	min-width: $min-width-item-pane;
 
 	.divider {
 		border-bottom: 1px solid var(--fill-quinary);

scss/components/_item-tree.scss

@@ -1,7 +1,17 @@
 @use "sass:map";
 
-#zotero-items-tree {
+#zotero-items-pane-container {
+	min-width: $min-width-items-pane;
+}
 
+#zotero-items-pane {
+	min-width: $min-width-items-pane;
+	min-height: 150px;
+	height: 150px;
+	width: 290px;
+}
+
+#zotero-items-tree {
 	.virtualized-table-body, .drag-image-container {
 		padding: 4px 8px 8px;
 	}

scss/components/_itemPane.scss

@@ -0,0 +1,6 @@
+#zotero-item-pane {
+	width: $min-width-item-pane;
+	min-width: $min-width-item-pane;
+	/* Need a min height to prevent layout issues in stacked mode */
+	min-height: 168px;
+}

scss/components/_mainWindow.scss

@@ -141,6 +141,11 @@
 	--panel-background: var(--material-toolbar);
 }
 
+#main-window {
+	min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav;
+	min-height: 300px;
+}
+
 #zotero-pane-stack > hbox {
 	// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
 	min-width: 0;

scss/elements/_itemPaneSidenav.scss

@@ -11,6 +11,7 @@ item-pane-sidenav {
 	gap: 6px;
 	background: var(--material-sidepane);
 	position: relative; // Stop item pane content from overlapping
+	width: $width-sidenav;
 
 	&.stacked {
 		flex-direction: row;