Use flexbox for sideNav. fixes #1408

framework/core/js/src/forum/components/IndexPage.js

@@ -71,6 +71,7 @@ export default class IndexPage extends Page {
       <div className="IndexPage">
         {this.hero()}
         <div className="container">
+          <div className="sideNavContainer">
             <nav className="IndexPage-nav sideNav">
               <ul>{listItems(this.sidebarItems().toArray())}</ul>
             </nav>
@@ -83,6 +84,7 @@ export default class IndexPage extends Page {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 

framework/core/js/src/forum/components/UserPage.js

@@ -40,6 +40,7 @@ export default class UserPage extends Page {
             controlsButtonClassName: 'Button'
           }),
           <div className="container">
+            <div className="sideNavContainer">
               <nav className="sideNav UserPage-nav" config={affixSidebar}>
                 <ul>{listItems(this.sidebarItems().toArray())}</ul>
               </nav>
@@ -47,6 +48,7 @@ export default class UserPage extends Page {
                 {this.content()}
               </div>
             </div>
+          </div>
         ] : [
           LoadingIndicator.component({className: 'LoadingIndicator--block'})
         ]}

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;
   }
 }

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;