fx115: fix main window element layout

chrome/content/zotero-platform/mac/overlay.css

@@ -6,15 +6,6 @@
 	-moz-binding: none !important;
 }
 
-.zotero-item-pane-content .groupbox-body {
-	-moz-appearance: none;
-	background-color: #ffffff;
-}
-
-#zotero-item-pane-message-box description {
-	color: #7f7f7f;
-}
-
 /* How to get active twisty?
 treechildren::-moz-tree-twisty(active) {
 	-moz-appearance: none;

chrome/content/zotero-platform/unix/itemPane.css

@@ -1,8 +0,0 @@
-/* Set to hidden in user-agent css for some reason. */
-#zotero-feed-item-addTo-button .menu-iconic-left {
-	visibility: visible;
-}
-
-.zotero-item-pane-content {
-	margin-right: 6px;
-}

chrome/content/zotero/zoteroPane.xhtml

@@ -1201,7 +1201,7 @@
 		
 					<!-- contextPane -->
 					<box id="zotero-context-pane" flex="0" collapsed="true" zotero-persist="width">
-						<vbox flex="1" style="width: 100%;height: 100%;">
+						<vbox flex="1" style="min-width: 0; min-height: 0;">
 							<box class="stacked-context-placeholder" flex="1"/>
 							<splitter id="zotero-context-splitter-stacked"
 									  state="collapsed"
@@ -1216,7 +1216,7 @@
 							>
 								<grippy/>
 							</splitter>
-							<context-pane id="zotero-context-pane-inner" flex="1" zotero-persist="height"></context-pane>
+							<context-pane id="zotero-context-pane-inner" zotero-persist="height"></context-pane>
 						</vbox>
 						<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 					</box>

chrome/skin/default/zotero/overlay.css

@@ -1,8 +1,3 @@
-#zotero-pane
-{
-	min-height: 32px; /* must match value in ZoteroPane.updateTagSelectorSize() */
-}
-
 /*
 TODO: Replace with SVG
 
@@ -204,23 +199,6 @@ TODO: Replace with SVG
 	width: 0px !important;
 }
 
-#zotero-item-pane[collapsed=true] {
-	min-width: 0px !important;
-	width: 0px !important;
-}
-
-#zotero-context-pane[collapsed=true] {
-	min-width: 0px !important;
-	width: 0px !important;
-}
-
-/* 
-	Fx115: this helps to avoid having a blank gap where the panel was before collapse
-*/
-#zotero-context-pane-inner[collapsed=true] {
-	height: 0 !important;
-}
-
 #zotero-pane toolbarseparator {
 	height:24px;
 }
@@ -235,45 +213,6 @@ TODO: Replace with SVG
 	padding: 0;
 }
 
-/*
-	Somewhat unified splitter styles
-*/
-#zotero-collections-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed]),
-#zotero-context-splitter:not([state=collapsed]),
-#zotero-context-splitter-stacked:not([state=collapsed])
-{
-	border:none;
-	background-color: transparent;
-}
-
-#zotero-collections-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
-#zotero-context-splitter:not([state=collapsed])[orient=horizontal]
-{
-	-moz-appearance: none;
-	width: 5px !important;
-	min-width: 5px;
-	/* Ensures all of the splitter serves as a mouse target */
-	z-index: 1;
-}
-
-#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
-#zotero-context-splitter:not([state=collapsed])[orient=horizontal],
-#zotero-collections-splitter:not([state=collapsed]) {
-	border-inline-start: 1px solid #bdbdbd;
-	margin-inline-end: -4px;
-}
-
-#zotero-items-splitter[orient=vertical]:not([state=collapsed]),
-#zotero-context-splitter-stacked
-{
-	z-index: 1;
-	border-top: 1px solid #bdbdbd !important;
-	min-height: 5px;
-	margin-bottom: -4px;
-}
-
 #zotero-lookup-textbox {
 	margin: 4px;
 	padding: 2px;

scss/abstracts/_variables.scss

@@ -110,5 +110,5 @@ $tagColorsLookup: (
 $min-width-collections-pane: 200px;
 $min-width-items-pane: 370px;
 $min-width-item-pane: 300px;
-$min-width-context-pane: 340px;
+$min-width-context-pane: 300px;
 $width-sidenav: 37px;

scss/components/_contextPane.scss

@@ -2,13 +2,9 @@
 	min-width: $min-width-collections-pane + $min-width-items-pane;
 }
 
-#tabs-deck:not([selectedIndex="0"]) #zotero-pane {
-	width: 0; /* Prevent the main pane from stretching the deck of the reader */
-}
-
 #zotero-context-pane {
 	display: flex;
-	min-width: $min-width-context-pane;
+	min-width: $min-width-context-pane + $width-sidenav;
 
 	.divider {
 		border-bottom: 1px solid var(--fill-quinary);
@@ -37,13 +33,18 @@
 }
 
 #zotero-context-pane-inner {
-	background: var(--material-background);
 	font: message-box;
 	font-size: inherit;
-	min-height: 100px;
+	min-width: $min-width-context-pane;
+	min-height: $min-width-context-pane;
 	height: 0;
 	pointer-events: auto;
-	background: var(--material-sidepane)
+	background: var(--material-sidepane);
+	flex-direction: column;
+	
+	&[collapsed=true] {
+		height: 0 !important;
+	}
 }
 
 .zotero-context-panes-deck {
@@ -59,24 +60,17 @@
 	height: 100%;
 }
 
-#zotero-context-pane-inner  {
-	height: 0;
-}
-
 #zotero-item-toolbar {
 	height: 32px;
 }
 
-.zotero-context-notes-list {
-	background-color: var(--material-sidepane);
-}
-
 .zotero-context-note-container {
-	background-color: var(--material-background);
+	background-color: var(--material-sidepane);
 }
 
 .zotero-context-pane-editor-parent-line {
 	height: 40px;
+	background: var(--material-toolbar);
 
 	& .parent-title-container {
 		display: flex;
@@ -113,9 +107,3 @@
 #zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
 	overflow: unset !important;
 }
-
-// fx115 - stop width or height from being set by dragging the splitter
-.zotero-view-item-sidenav {
-	width: auto !important;
-	height: auto !important;
-}

scss/components/_mainWindow.scss

@@ -7,6 +7,11 @@
 	min-height: 300px;
 }
 
+#zotero-pane {
+	min-width: 0;
+	min-height: 0;
+}
+
 #zotero-pane-stack > hbox {
 	// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
 	min-width: 0;

scss/elements/_contextPane.scss

@@ -1,3 +1,15 @@
 context-pane {
     -moz-box-orient: vertical;
+
+    #zotero-context-pane-item-deck,
+    #zotero-context-pane-notes-deck {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+
+    .zotero-context-notes-list {
+        min-width: 0;
+        min-height: 0;
+    }
 }

scss/elements/_itemDetails.scss

@@ -1,5 +1,6 @@
 .zotero-item-pane-message-box description {
 	padding: 0 2em;
+	color: var(--fill-tertiary);
 }
 
 .zotero-item-pane-content > groupbox, .zotero-item-pane-content > groupbox > .groupbox-body
@@ -11,7 +12,7 @@
 .zotero-item-pane-content {
 	min-height: 0;
 	flex: 1;
-	width: $min-width-item-pane;
+	width: auto !important;
 	min-width: $min-width-item-pane;
 	/* Need a min height to prevent layout issues in stacked mode */
 	min-height: 168px;
@@ -21,7 +22,7 @@
 .zotero-view-item-container {
 	display: flex;
 	flex-direction: row;
-	height: 0;
+	height: auto;
 }
 
 .zotero-view-item-main {

scss/elements/_itemPane.scss

@@ -1,4 +1,7 @@
 item-pane {
+	min-width: $min-width-item-pane + $width-sidenav;
+	min-height: $min-width-item-pane + $width-sidenav;
+
 	&[collapsed="true"] {
 		min-width: $width-sidenav;
 		min-height: $width-sidenav;
@@ -27,6 +30,11 @@ item-pane {
 	}
 
 	&.stacked {
-		-moz-box-orient: vertical;
+		flex-direction: column;
+		height: 0px;
+
+		#zotero-item-pane-content {
+			width: 100%;
+		}
 	}
 }

scss/elements/_itemPaneSidenav.scss

@@ -12,8 +12,11 @@ item-pane-sidenav {
 	background: var(--material-sidepane);
 	position: relative; // Stop item pane content from overlapping
 	width: $width-sidenav;
+	height: auto;
 
 	&.stacked {
+		width: auto;
+		height: $width-sidenav;
 		flex-direction: row;
 		border-inline-start: none;
 		border-top: var(--material-panedivider);