From 60af367b18d7834f6e1964d8884265fa4ff22167 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 16 Jul 2020 03:59:21 +0800
Subject: [PATCH] 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                         |  1 +
 ui/component/channelContent/view.jsx |  2 +-
 ui/page/fileListDownloaded/view.jsx  |  2 +-
 ui/scss/component/_claim-search.scss | 10 ++++++----
 ui/scss/component/_wunderbar.scss    | 10 +++++++++-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 987253793..faff9d96a 100644
--- a/CHANGELOG.md
+++ b/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]
 
diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx
index 6eb79a6c6..b2a1977be 100644
--- a/ui/component/channelContent/view.jsx
+++ b/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"
diff --git a/ui/page/fileListDownloaded/view.jsx b/ui/page/fileListDownloaded/view.jsx
index bb8785d07..37a5255ff 100644
--- a/ui/page/fileListDownloaded/view.jsx
+++ b/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"
diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss
index 26af04eaa..fd1495a5e 100644
--- a/ui/scss/component/_claim-search.scss
+++ b/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);
-  }
 }
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index a7694d7c5..85ca1642f 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/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;