Make settings menu more usable

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -124,4 +124,8 @@ export default {
 	#content * {
 		box-sizing: border-box;
 	}
+
+	.multiselect {
+		width: 100%;
+	}
 </style>

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>
+<style scoped lang="scss">
-	.multiselect {
+	#app-settings-content {
-		width: 100%;
+		p {
+			margin-top: 20px;
+			margin-bottom: 20px;
+			color: var(--color-text-light);
+		}
 	}
 </style>