From e45ab420c2ed2490e6b39ecbad754ad1c44e4720 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Sat, 21 Apr 2018 14:15:14 -0400
Subject: [PATCH 1/2] Make the filter input full height

This way you can click anywhere to gain focus
---
 src/components/filter/filter.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index ee60b1ac8..eccfb0334 100644
--- a/src/components/filter/filter.css
+++ b/src/components/filter/filter.css
@@ -79,7 +79,8 @@
 
 .filter-input {
     flex-grow: 1;
-    line-height: 1.25rem;
+    height: $library-filter-bar-height;
+    line-height: $library-filter-bar-height;
     background-color: transparent;
     -webkit-appearance: none;
     outline: none;

From 170eb4343c888e2ebf56917caba6f6bd5b1e7a9e Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Mon, 23 Apr 2018 10:09:35 -0400
Subject: [PATCH 2/2] Make whole search clickable

---
 src/components/filter/filter.css   | 17 ++++++++++++-----
 src/components/library/library.css |  4 ++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index eccfb0334..b67e60795 100644
--- a/src/components/filter/filter.css
+++ b/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;
@@ -80,7 +88,6 @@
 .filter-input {
     flex-grow: 1;
     height: $library-filter-bar-height;
-    line-height: $library-filter-bar-height;
     background-color: transparent;
     -webkit-appearance: none;
     outline: none;
@@ -89,7 +96,7 @@
     font-size: 0.75rem;
     letter-spacing: 0.15px;
     cursor: text;
-    margin-left: .5rem;
+    padding: .625rem 2rem .625rem 3rem;
 }
 
 .filter-input::placeholder {
diff --git a/src/components/library/library.css b/src/components/library/library.css
index c8b3edade..d94f6defd 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -33,13 +33,13 @@
 }
 
 .filter-input {
-    width: 6rem;
+    width: 11.5rem;
     transition: .2s;
 }
 
 .filter-input:focus,
 .filter-input:not([value=""]) {
-    width: 13.25rem;
+    width: 18.75rem;
 }
 
 .divider {