Merge pull request #7240 from sazanof/fix/composer-modal-multiselects

Improving the appearance of the Composer window

1 files changed, 50 insertions, 8 deletions

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index e2487c5ad..2d49165b9 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -1265,15 +1265,54 @@ export default {
 	border-top: 1px solid var(--color-border);
 	align-items: flex-start;
 
+	label {
+		padding: 11px 20px 11px 0;
+	}
+
+	::v-deep(.multiselect--multiple .multiselect__tags) {
+		display: grid;
+		grid-template-columns: calc(100% - 18px) 18px 100%;
+
+		.multiselect__limit {
+			margin-right: 0;
+			margin-left: 8px
+		}
+	}
+
+	::v-deep(.multiselect__content-wrapper) {
+		border-bottom: 1px solid var(--color-border);
+		margin-top: 0;
+
+		& li > span::before {
+			display: none
+		}
+	}
+
+	::v-deep(.multiselect__input) {
+		position: relative !important;
+		top: 0;
+		grid-column-start: 1;
+		grid-column-end: 3;
+	}
+
+	::v-deep(.multiselect--active input:focus-visible) {
+		box-shadow: none;
+	}
+
+	::v-deep(.multiselect__tags) {
+		box-sizing: border-box;
+		height: auto;
+	}
+
 	&__from {
 		margin-right: 50px; /* for the modal close button */
 	}
 
 	.multiselect.multiselect--multiple::after {
-		position:absolute;
+		position: absolute;
 		right: 0;
 		top: auto;
-		bottom:8px
+		bottom: 8px
 	}
 
 	.multiselect__tag {
@@ -1303,18 +1342,19 @@ export default {
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
-		padding-top:2px;
+		padding-top: 2px;
 		width: calc(100% - 120px);
 
 		button {
 			margin-top: 0;
+			margin-bottom: 0;
 			background-color: transparent;
-			border:none;
+			border: none;
 			opacity: 0.5;
 			padding: 10px 16px;
 		}
 
-		button.active,button:active {
+		button.active, button:active {
 			opacity: 1;
 		}
 
@@ -1328,9 +1368,14 @@ export default {
 	}
 
 	.subject {
+		font-size: 15px;
 		font-weight: bold;
 		margin: 3px 0 !important;
 		padding: 0 12px !important;
+
+		&:focus-visible {
+			box-shadow: none !important;
+		}
 	}
 
 	.message-body {
@@ -1408,9 +1453,6 @@ export default {
 ::v-deep .multiselect .multiselect__tags, .subject {
 	border: none !important;
 }
-::v-deep .multiselect .multiselect__input {
-	height: auto !important;
-}
 ::v-deep [data-select="create"] .avatardiv--unknown {
 	background: var(--color-text-maxcontrast) !important;
 }