From 746993c389c6a65548db79fdf9bbb6f1087465e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 20 Apr 2020 17:32:11 +0200
Subject: [PATCH] Make settings menu more usable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                                 |  4 ++++
 src/components/navigation/AppNavigation.vue | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5e114a40b..47401cf1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -124,4 +124,8 @@ export default {
 	#content * {
 		box-sizing: border-box;
 	}
+
+	.multiselect {
+		width: 100%;
+	}
 </style>
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index e9919dac5..f56996595 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -53,9 +53,11 @@
 			<div id="app-settings-content">
 				<Multiselect v-model="groupLimit"
 					:class="{'icon-loading-small': groupLimitDisabled}"
+					open-direction="bottom"
 					:options="groups"
 					:multiple="true"
 					:disabled="groupLimitDisabled"
+					:placeholder="t('deck', 'Limit deck usage of groups')"
 					label="displayname"
 					track-by="id"
 					@input="updateConfig" />
@@ -155,8 +157,12 @@ export default {
 	},
 }
 </script>
-<style>
-	.multiselect {
-		width: 100%;
+<style scoped lang="scss">
+	#app-settings-content {
+		p {
+			margin-top: 20px;
+			margin-bottom: 20px;
+			color: var(--color-text-light);
+		}
 	}
 </style>