From fc02f49d9363b61190915506954647108caef0b8 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Wed, 2 Oct 2019 18:17:52 +0300
Subject: [PATCH] Fix layout of Searchbar in IDEView

---
 client/modules/User/pages/DashboardView.jsx     | 14 ++++++++++----
 client/styles/components/_dashboard-header.scss | 11 ++++++++++-
 client/styles/components/_searchbar.scss        |  4 +---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 534111ff..13120e48 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -83,7 +83,12 @@ class DashboardView extends React.Component {
         return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
       case TabKey.sketches:
       default:
-        return <Link className="dashboard__action-button" to="/">New sketch</Link>;
+        return (
+          <React.Fragment>
+            <Searchbar />
+            <Link className="dashboard__action-button" to="/">New sketch</Link>
+          </React.Fragment>
+        );
     }
   }
 
@@ -111,10 +116,11 @@ class DashboardView extends React.Component {
         <section className="dashboard-header">
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
-            <div className="dashboard-header__actions">
+            <div className="dashboard-header__nav">
               <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
-              {currentTab === TabKey.sketches && <Searchbar />}
-              {this.renderActionButton(currentTab, username)}
+              <div className="dashboard-header__actions">
+                {this.renderActionButton(currentTab, username)}
+              </div>
             </div>
           </div>
 
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 130e7067..953958fa 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -55,12 +55,21 @@
   margin: 0;
 }
 
-.dashboard-header__actions {
+.dashboard-header__nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.dashboard-header__actions {
+  display: flex;
+  align-items: center;
+}
+
+.dashboard-header__actions > * {
+  margin-left: #{15 / $base-font-size}rem;
+}
+
 .dashboard__action-button {
   flex-grow: 0;
   @extend %button;
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 07e8585b..62156743 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -1,9 +1,7 @@
 .searchbar {
-  position: absolute;
+  position: relative;
   display: flex;
   padding-left: #{17 / $base-font-size}rem;
-  right: #{66 / $base-font-size}rem;
-  top: #{65 / $base-font-size}rem;
 }
 
 .searchbar__input {