css fixes (#431)

Author: joshreisner

public/app.js

@@ -59,18 +59,22 @@ export const controlsGroupLastCss = css`
 `;
 
 export const controlsInputCss = css`
-  ${formControlCss}
-  border: 1px solid ${color.medium};
-  &:focus {
-    border: 1px solid ${color.dark};
-    outline: none;
+  &[type='search'] {
+    ${formControlCss}
+    border: 1px solid ${color.medium};
+    &:focus {
+      border: 1px solid ${color.dark};
+      outline: none;
+    }
   }
 `;
 
 export const controlsInputFirstCss = css`
   ${controlsInputCss}
-  border-bottom-right-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+  &[type='search'] {
+    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
 `;
 
 export const controlsSearchDropdownCss = css`

src/styles/controls.ts

@@ -10,8 +10,10 @@ export const dropdownCss = css`
     border-radius: var(--border-radius);
     border: 1px solid ${color.medium};
     margin-top: 4px;
+    max-height: 50vh;
     min-width: 100%;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     position: absolute;
     z-index: 1000;
 
@@ -20,6 +22,7 @@ export const dropdownCss = css`
       border: 0;
       height: 1px;
       margin: 0;
+      width: 100%;
     }
 
     button {