Merge pull request #1841 from rschamp/bugfix/search-height

Make the library filter input full height

src/components/filter/filter.css

@@ -7,17 +7,22 @@
     align-items: center;
     flex-grow: 1;
 
-    padding: .625rem .5rem;
     background: $ui-white;
     border-radius: 10rem;
     user-select: none;
     height: $library-filter-bar-height;
+
+    position: relative;
 }
 
 .filter-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+
     height: 1rem;
     width: 1rem;
-    margin: 0 .5rem;
+    margin: 0.75rem 0.75rem 0.75rem 1rem;
 }
 
 .filter:focus-within {
@@ -29,6 +34,9 @@
 */
 .x-icon-wrapper {
     opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
 
     display: flex;
     justify-content: center;
@@ -37,7 +45,7 @@
     overflow: hidden;  /* Mask the icon animation */
     height: 1.25rem;
     width: 1.25rem;
-    margin: 0 0.25rem 0 0.5rem; /* @todo: move to parent to make component*/
+    margin: 0.625rem;
 
     border-radius: 50%;
     pointer-events: none;
@@ -79,7 +87,7 @@
 
 .filter-input {
     flex-grow: 1;
-    line-height: 1.25rem;
+    height: $library-filter-bar-height;
     background-color: transparent;
     -webkit-appearance: none;
     outline: none;
@@ -88,7 +96,7 @@
     font-size: 0.75rem;
     letter-spacing: 0.15px;
     cursor: text;
-    margin-left: .5rem;
+    padding: .625rem 2rem .625rem 3rem;
 }
 
 .filter-input::placeholder {

src/components/library/library.css

@@ -37,13 +37,13 @@
 }
 
 .filter-input {
-    width: 6rem;
+    width: 11.5rem;
     transition: .2s;
 }
 
 .filter-input:focus,
 .filter-input:not([value=""]) {
-    width: 13.25rem;
+    width: 18.75rem;
 }
 
 .divider {