From 72778ddb8c28b74293b635615c48bd81bf33d8bd Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Fri, 20 Jul 2018 12:34:43 +0930
Subject: [PATCH] Use flexbox for sideNav. fixes #1408

---
 .../core/js/src/forum/components/IndexPage.js  | 18 ++++++++++--------
 .../core/js/src/forum/components/UserPage.js   | 12 +++++++-----
 framework/core/less/common/sideNav.less        |  8 ++++++--
 framework/core/less/forum/ActivityPage.less    |  2 +-
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/framework/core/js/src/forum/components/IndexPage.js b/framework/core/js/src/forum/components/IndexPage.js
index a49a10734..bfe24de0b 100644
--- a/framework/core/js/src/forum/components/IndexPage.js
+++ b/framework/core/js/src/forum/components/IndexPage.js
@@ -71,15 +71,17 @@ export default class IndexPage extends Page {
       <div className="IndexPage">
         {this.hero()}
         <div className="container">
-          <nav className="IndexPage-nav sideNav">
-            <ul>{listItems(this.sidebarItems().toArray())}</ul>
-          </nav>
-          <div className="IndexPage-results sideNavOffset">
-            <div className="IndexPage-toolbar">
-              <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
-              <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
+          <div className="sideNavContainer">
+            <nav className="IndexPage-nav sideNav">
+              <ul>{listItems(this.sidebarItems().toArray())}</ul>
+            </nav>
+            <div className="IndexPage-results sideNavOffset">
+              <div className="IndexPage-toolbar">
+                <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
+                <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
+              </div>
+              {app.cache.discussionList.render()}
             </div>
-            {app.cache.discussionList.render()}
           </div>
         </div>
       </div>
diff --git a/framework/core/js/src/forum/components/UserPage.js b/framework/core/js/src/forum/components/UserPage.js
index c3b9c6f84..cd2809063 100644
--- a/framework/core/js/src/forum/components/UserPage.js
+++ b/framework/core/js/src/forum/components/UserPage.js
@@ -40,11 +40,13 @@ export default class UserPage extends Page {
             controlsButtonClassName: 'Button'
           }),
           <div className="container">
-            <nav className="sideNav UserPage-nav" config={affixSidebar}>
-              <ul>{listItems(this.sidebarItems().toArray())}</ul>
-            </nav>
-            <div className="sideNavOffset UserPage-content">
-              {this.content()}
+            <div className="sideNavContainer">
+              <nav className="sideNav UserPage-nav" config={affixSidebar}>
+                <ul>{listItems(this.sidebarItems().toArray())}</ul>
+              </nav>
+              <div className="sideNavOffset UserPage-content">
+                {this.content()}
+              </div>
             </div>
           </div>
         ] : [
diff --git a/framework/core/less/common/sideNav.less b/framework/core/less/common/sideNav.less
index 98b42f109..7f6ac965e 100644
--- a/framework/core/less/common/sideNav.less
+++ b/framework/core/less/common/sideNav.less
@@ -54,8 +54,12 @@
 }
 
 @media @desktop-up {
+  .sideNavContainer {
+    display: flex;
+  }
   .sideNav {
-    float: left;
+    flex-shrink: 0;
+    margin-right: 50px;
 
     &, > ul {
       width: 190px;
@@ -119,6 +123,6 @@
 @media @desktop-up {
   .sideNavOffset {
     margin-top: 30px;
-    margin-left: 240px;
+    flex: 1;
   }
 }
diff --git a/framework/core/less/forum/ActivityPage.less b/framework/core/less/forum/ActivityPage.less
index 875d8d3a2..4d3fafcb9 100644
--- a/framework/core/less/forum/ActivityPage.less
+++ b/framework/core/less/forum/ActivityPage.less
@@ -12,6 +12,7 @@
 
   > li {
     border-bottom: 1px solid @control-bg;
+    margin-bottom: 15px;
   }
 
   .Post {
@@ -20,7 +21,6 @@
 }
 .PostsUserPage-discussion {
   font-weight: bold;
-  margin-top: 15px;
   margin-bottom: 10px;
   position: relative;
   z-index: 1;