Experiment with the new item pane UI

scss/_zotero-react-client.scss

@@ -26,6 +26,7 @@
 @import "components/editable";
 @import "components/icons";
 @import "components/mainWindow";
+@import "components/notesList";
 @import "components/progressMeter";
 @import "components/search";
 @import "components/syncButtonTooltip";

scss/components/_notesList.scss

@@ -0,0 +1,53 @@
+.notes-list-container {
+	display: flex;
+	width: 100%;
+	overflow-y: auto;
+	flex-grow: 1;
+}
+
+.notes-list {
+	display: flex;
+	flex-direction: column;
+	height: 0;
+	flex-grow: 1;
+}
+
+.note-row {
+	padding: 8px 0;
+
+	&:not(:last-child) {
+		border-bottom: 1px solid $shade-3;
+	}
+
+	.inner {
+		.first-line {
+			display: flex;
+
+			.title {
+				flex-grow: 1;
+				width: 0;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-weight: bold;
+			}
+		}
+
+		.second-line {
+			display: flex;
+
+			.date {
+			}
+
+			.body {
+				flex-grow: 1;
+				width: 0;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				margin-left: 10px;
+				color: $shade-6;
+			}
+		}
+	}
+}

scss/components/_tagsBox.scss

@@ -1,8 +1,8 @@
-#tags-pane {
+.tags-pane {
 	display: flex;
 }
 
-#tags-box-container {
+.tags-box-container {
 	flex-grow: 1;
 	display: flex;
 }
@@ -14,7 +14,11 @@
 	$li-side-margin: 6px;
 	
 	flex-grow: 1;
-	width: 330px;
+	//width: 330px;
+	
+	// This is necessary for XUL layout to prevent children
+	// container to force its height for the parent
+	height: 0;
 	
 	.tags-box-header {
 		display: flex;
@@ -61,7 +65,7 @@
 	.editable-container {
 		flex-grow: 1;
 		margin: 0 2px;
-		width: $item-pane-width - $icon-width - $delete-button-width - ($li-side-margin * 2);
+		//width: $item-pane-width - $icon-width - $delete-button-width - ($li-side-margin * 2);
 	}
 	
 	ul.tags-box-list > li:not(.multiline) .editable-container {