Using keydown instead of search event in filters for browser compatability, added search button.

components/actors/actors.vue

@@ -1,14 +1,21 @@
 <template>
 	<div class="page">
 		<Filters :results="total">
-			<div class="filter">
+			<div class="filter search-container">
+				<!-- onsearch not compatible with FF and Safari -->
 				<input
 					v-model="q"
 					type="search"
 					placeholder="Search actors"
 					class="input search"
-					@search="search"
+					@keydown.enter="search"
 				>
+
+				<Icon
+					icon="search"
+					class="search-button"
+					@click="search"
+				/>
 			</div>
 
 			<GenderFilter

components/filters/filters.vue

@@ -85,6 +85,28 @@ function toggleFilters(state) {
 	}
 }
 
+.filter.search-container {
+	display: flex;
+	align-items: stretch;
+
+	.input {
+		flex-grow: 1;
+	}
+
+	.icon {
+		height: auto;
+		display: flex;
+		align-items: center;
+		padding-left: .5rem;
+		fill: var(--shadow);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);

components/scenes/scenes.vue

@@ -7,14 +7,21 @@
 				v-if="showFilters"
 				:loading="loading"
 			>
-				<div class="filter">
+				<div class="filter search-container">
+					<!-- onsearch not compatible with FF and Safari -->
 					<input
 						v-model="filters.search"
 						type="search"
 						placeholder="Search scenes"
 						class="search input"
-						@search="search"
+						@keydown.enter="search"
 					>
+
+					<Icon
+						icon="search"
+						class="search-button"
+						@click="search"
+					/>
 				</div>
 
 				<TagsFilter