Fix channel file-search not available in mobile

## Issue
Fixes 4524 `[mobile] in channel search not available`

## Changes
There are currently 3 wunderbars: (1) header (2) channel list (3) downloaded list.

The additional `wrapperStyle` in the header made it hard to find a solution that works for all 3, so I split 2 and 3 into `wunderbar__input--inline`.

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Fix 'transcoding' checkbox state when switching file types _community pr!_ ([#4529](https://github.com/lbryio/lbry-desktop/pull/4529))
+- Fix channel file-search not available in mobile _community pr!_ ([#4527](https://github.com/lbryio/lbry-desktop/pull/4527))
 
 ## [0.47.0] - [2020-07-13]
 

ui/component/channelContent/view.jsx

@@ -131,7 +131,7 @@ function ChannelContent(props: Props) {
             <Form onSubmit={() => {}} className="wunderbar--inline">
               <Icon icon={ICONS.SEARCH} />
               <FormField
-                className="wunderbar__input"
+                className="wunderbar__input--inline"
                 value={searchQuery}
                 onChange={handleInputChange}
                 type="text"

ui/page/fileListDownloaded/view.jsx

@@ -85,7 +85,7 @@ function FileListDownloaded(props: Props) {
           <Form onSubmit={() => {}} className="wunderbar--inline">
             <Icon icon={ICONS.SEARCH} />
             <FormField
-              className="wunderbar__input"
+              className="wunderbar__input--inline"
               onChange={handleInputChange}
               value={query}
               type="text"

ui/scss/component/_claim-search.scss

@@ -75,11 +75,13 @@
   flex-wrap: wrap;
 }
 
+.claim-search__top > div {
+  @media (max-width: $breakpoint-small) {
+    margin: var(--spacing-xxs) 0;
+  }
+}
+
 .claim-search__top-row {
   display: flex;
   flex-wrap: nowrap;
-
-  @media (max-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-s);
-  }
 }

ui/scss/component/_wunderbar.scss

@@ -29,7 +29,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    display: none;
+    margin: var(--spacing-xxs) 0;
   }
 }
 
@@ -60,6 +60,14 @@
   }
 }
 
+.wunderbar__input--inline {
+  @extend .wunderbar__input;
+  @media (max-width: $breakpoint-small) {
+    position: absolute;
+    top: 0;
+  }
+}
+
 .wunderbar__menu {
   min-width: 100%;
   overflow: hidden;