Style MultipleItemsDialog

mick-schroeder · Aug 26, 2021 · fe848c1 · fe848c1
1 parent 616ee40
commit fe848c1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/js/components/multiple-items-dialog.jsx b/src/js/components/multiple-items-dialog.jsx
@@ -98,6 +98,7 @@ const MultipleItemsDialog = props => {
 									} />
 									<input
 										checked={ selectedItems.includes(item.id) }
+										className="checkbox"
 										onChange={ handleItemSelectionChange }
 										tabIndex={ -1 }
 										type="checkbox"
@@ -123,8 +124,8 @@ const MultipleItemsDialog = props => {
 
 MultipleItemsDialog. propTypes = {
 	activeDialog: PropTypes.string,
-	multipleItems: PropTypes.object,
 	multipleChoiceItems: PropTypes.array,
+	multipleItems: PropTypes.object,
 	onMultipleItemsCancel: PropTypes.func.isRequired,
 	onMultipleItemsSelect: PropTypes.func.isRequired,
 }

diff --git a/src/scss/components/_multiple-choice-dialog.scss b/src/scss/components/_multiple-choice-dialog.scss
@@ -18,6 +18,7 @@
 		border-top: 1px solid $result-border-color;
 		padding: $result-padding;
 		cursor: pointer;
+		display: flex;
 
 		&:hover {
 			background-color: $result-hover-bg;
@@ -61,6 +62,14 @@
 		.description {
 			margin: 0;
 		}
+
+		.checkbox {
+			align-self: center;
+		}
+
+		.csl-entry {
+			word-break: break-word;
+		}
 	}
 
 	.more-items-action {