Minor UI improvements (#4959)

* PLT-5128 - Fixing channel header responsively

* PLT-4984 - Fixing search popover behaviour

6 files changed, 47 insertions, 39 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index cfd9b0c73..bea722243 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -193,6 +193,19 @@ export default class SearchBar extends React.Component {
             </Tooltip>
         );
 
+        const searchPopover = (
+            <Popover
+                id='searchbar-help-popup'
+                placement='bottom'
+                className={helpClass}
+            >
+                <FormattedHTMLMessage
+                    id='search_bar.usage'
+                    defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
+                />
+            </Popover>
+        );
+
         const flaggedTooltip = (
             <Tooltip id='flaggedTooltip'>
                 <FormattedMessage
@@ -276,29 +289,28 @@ export default class SearchBar extends React.Component {
                     autoComplete='off'
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
-                    <SuggestionBox
-                        ref='search'
-                        className='form-control search-bar'
-                        placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
-                        value={this.state.searchTerm}
-                        onFocus={this.handleUserFocus}
-                        onBlur={this.handleUserBlur}
-                        onChange={this.handleChange}
-                        listComponent={SearchSuggestionList}
-                        providers={this.suggestionProviders}
-                        type='search'
-                    />
-                    {isSearching}
-                    <Popover
-                        id='searchbar-help-popup'
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
                         placement='bottom'
+                        overlay={searchPopover}
+                        trigger='focus'
+                        rootClose={true}
                         className={helpClass}
                     >
-                        <FormattedHTMLMessage
-                            id='search_bar.usage'
-                            defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>'
+                        <SuggestionBox
+                            ref='search'
+                            className='form-control search-bar'
+                            placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
+                            value={this.state.searchTerm}
+                            onFocus={this.handleUserFocus}
+                            onBlur={this.handleUserBlur}
+                            onChange={this.handleChange}
+                            listComponent={SearchSuggestionList}
+                            providers={this.suggestionProviders}
+                            type='search'
                         />
-                    </Popover>
+                    </OverlayTrigger>
+                    {isSearching}
                 </form>
 
                 {mentionBtn}
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index b4839bd1f..31ef83d6a 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -93,20 +93,18 @@
 }
 
 .search-help-popover {
-    @include single-transition(opacity, .3s, ease-in);
     font-size: em(13px);
-    max-width: 350px;
-    top: 36px;
-    visibility: hidden;
+    margin-top: 17px !important;
+    max-width: 300px;
     width: 100%;
 
     &.autocomplete {
         display: block;
 
         .popover-content {
+            -webkit-overflow-scrolling: touch;
             padding: 10px;
             position: relative;
-            -webkit-overflow-scrolling: touch;
         }
     }
 
@@ -205,11 +203,6 @@
     .tooltip-inner {
         max-width: 100%;
     }
-
-    &.visible {
-        @include opacity(1);
-        visibility: visible;
-    }
 }
 
 .member-list__popover {
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index f5deff302..68b47684e 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -85,6 +85,14 @@
             }
         }
     }
+
+    .channel-header {
+        .search-bar__container {
+            .search__form {
+                width: 150px;
+            }
+        }
+    }
 }
 
 @media (min-width: 992px) {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index b0302afba..02525aec5 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -427,8 +427,8 @@
     }
 
     .search-help-popover {
-        left: 55px;
-        max-width: calc(100% - 10px);
+        margin-left: 10px;
+        max-width: calc(100% - 20px);
     }
 
     .modal-direct-channels,
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 5e5e6180a..c9bc1b06b 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -9,14 +9,8 @@
     }
 
     .channel-header {
-        .search-bar__container {
-            .search__form {
-                width: 150px;
-            }
-        }
-
         .heading {
-            max-width: 110px;
+            max-width: 100px;
         }
     }
 
@@ -39,9 +33,9 @@
             }
 
             .post-error {
-                top: 0;
                 left: 32px;
                 position: relative;
+                top: 0;
 
                 .sidebar--right & {
                     left: 0;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 835510c3b..8162846e2 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -824,6 +824,7 @@ export const Constants = {
             description: 'Enable WebRTC one on one calls'
         }
     },
+    OVERLAY_TIME_DELAY_SMALL: 100,
     OVERLAY_TIME_DELAY: 400,
     WEBRTC_TIME_DELAY: 750,
     WEBRTC_CLEAR_ERROR_DELAY: 15000,