Add search bar

frontend/src/components/MenuTooltip.vue

@@ -110,7 +110,6 @@
 					background-color: rgba(255, 255, 255, 0.97);
 					border-radius: 0.25rem 0.25rem 0 0;
 					font-size: 1.125rem;
-					max-height: 20rem;
 					opacity: 0;
 					overflow-y: auto;
 					position: fixed;
@@ -119,7 +118,7 @@
 					transition: opacity 0.2s, bottom 0.2s;
 
 					@at-root #{&}__inner {
-						max-height: 100%;
+						max-height: 20rem;
 					}
 
 					@at-root #{&}--show {

frontend/src/components/SelectFilter.vue

@@ -11,6 +11,15 @@
 		</button>
 
 		<template slot='menu'>
+			<fancy-input
+				class='select_filter__search'
+
+				v-if='searchPlaceholder'
+				:placeholder='searchPlaceholder'
+				width='100%'
+				v-model='search'
+			></fancy-input>
+
 			<div
 				class='select_filter__item select_filter__item--select_all'
 				@click='toggleSelectAll'
@@ -38,17 +47,20 @@
 </template>
 
 <script>
+	import FancyInput from './FancyInput';
 	import MenuTooltip from './MenuTooltip';
 
 	export default {
 		name: 'SelectFilter',
-		props: ['name', 'options', 'value'],
+		props: ['name', 'options', 'value', 'search-placeholder'],
 		components: {
+			FancyInput,
 			MenuTooltip
 		},
 		data () {
 			return {
 				menuOpen: false,
+				search: '',
 				selected: []
 			}
 		},
@@ -78,6 +90,9 @@
 				});
 
 				this.$emit('value', selectedItems);
+			},
+			search () {
+				this.$emit('search', this.search);
 			}
 		},
 		mounted () {
@@ -111,6 +126,9 @@
 			}
 		}
 
+		@at-root #{&}__search {
+		}
+
 		@at-root #{&}__item {
 			align-items: center;
 			background-color: #fff;

frontend/src/components/routes/AdminUsers.vue

@@ -7,6 +7,7 @@
 					name='Username'
 					:options='usernameOptions'
 					v-model='usernameSelected'
+					search-placeholder='Filter users'
 				>
 				</select-filter>
 				<select-filter