Improved sidebar search styling and behavior.

assets/components/filters/filter-bar.vue

@@ -286,6 +286,10 @@ export default {
     }
 }
 
+.filters {
+	flex-shrink: 0;
+}
+
 .sort {
     display: flex;
     align-items: center;

assets/components/header/search.vue

@@ -93,7 +93,7 @@ export default {
 .search-input {
     height: 100%;
     width: 100%;
-    padding: .5rem;
+    padding: .5rem 0 .5rem .5rem;
     border: none;
     color: var(--text);
     background: var(--background);

assets/components/sidebar/sidebar.vue

@@ -29,7 +29,10 @@
 					/>
 				</div>
 
-				<Search class="search-full" />
+				<Search
+					class="search"
+					@search="$emit('toggle', false)"
+				/>
 
 				<nav class="nav">
 					<ul class="nolist">
@@ -191,7 +194,7 @@ export default {
 	width: 100%;
     position: absolute;
     z-index: 10;
-	background: var(--darken);
+	background: var(--darken-weak);
 }
 
 .sidebar {
@@ -211,7 +214,6 @@ export default {
     justify-content: space-between;
     height: 3rem;
     border-bottom: solid 1px var(--shadow-hint);
-    margin: 0 0 .5rem 0;
 }
 
 .sidebar-close {
@@ -247,6 +249,17 @@ export default {
 	fill: var(--primary);
 }
 
+::v-deep .search {
+	height: 3rem;
+	border-bottom: solid 1px var(--shadow-hint);
+	padding: 0;
+	margin: 0 0 .5rem 0;
+
+	.search-input {
+		padding: .5rem 0 .5rem 1rem;
+	}
+}
+
 .nav-item {
     display: block;
 }