layout fixes

3 files changed, 41 insertions, 39 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 7f383900..626153e0 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -105,19 +105,28 @@ export default class App extends React.Component {
               <nav id="global">
                 {user.uid > 0 ?
                   <Link to={{ pathname: '/' }}>
-                    <Icon name="ei-bell" size="s" /><span>Discuss</span>
+                    <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
                     {
                       user.unreadCount &&
                       <span className="badge">{user.unreadCount}</span>
                     }
                   </Link>
                   :
-                  <Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link>
+                  <Link to='/?media=1' rel="nofollow">
+                    <Icon name="ei-camera" size="s" />
+                    <span className="desktop">Photos</span>
+                  </Link>
                 }
-                <Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link>
+                <Link to={{ pathname: '/discover' }} rel="nofollow">
+                  <Icon name="ei-search" size="s" />
+                    <span className="desktop">Discover</span>
+                  </Link>
 
                 {user.uid > 0 ?
-                  <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
+                  <Link to={{ pathname: '/post' }}>
+                    <Icon name="ei-pencil" size="s" />
+                      <span className="desktop">Post</span>
+                    </Link>
                   :
                   <LoginButton title="Login" onAuth={this.auth} />
                 }
@@ -158,13 +167,9 @@ export default class App extends React.Component {
                 <Icon name="ei-bell" size="s" />
                 <span className="desktop">Discussions</span>
               </Link>
-              <Link to={`/${user.name}/?show=recomm`} rel="nofollow">
-                <Icon name="ei-heart" size="s" />
-                <span className="desktop">Recommendations</span>
-              </Link>
-              <Link to={`/${user.name}/?show=photos`} rel="nofollow">
-                <Icon name="ei-camera" size="s" />
-                <span className="desktop">Photos</span>
+              <Link to="/settings" rel="nofollow">
+                <Icon name="ei-gear" size="s" />
+                <span className="desktop">Settings</span>
               </Link>
             </aside>
           </div>
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 079674a7..b824c0ed 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -80,20 +80,16 @@ export default class Thread extends React.Component {
     const loaders = Math.min(msg.replies || 0, 10);
     return (
       <>
-        <ul id="0">
-          <li className="msg msgthread">
-            {
-              msg.mid ? (
-                <Message data={msg} visitor={this.props.visitor}>
-                  {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
-                  <Recommendations forMessage={msg} />
-                </Message>
-              ) : (
-                  <Spinner />
-                )
-            }
-          </li>
-        </ul>
+        {
+          msg.mid ? (
+            <Message data={msg} visitor={this.props.visitor}>
+              {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
+              <Recommendations forMessage={msg} />
+            </Message>
+          ) : (
+              <Spinner />
+            )
+        }
         <ul id="replies">
           {
             !this.state.loading ? this.state.replies.map((msg) => (
@@ -140,10 +136,10 @@ export default class Thread extends React.Component {
               </li>
             )) : (
                 <>
-            {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
-          </>
-          )
-      }
+                  {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+                </>
+              )
+          }
         </ul>
       </>
     );
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index dfc657cf..4d6b1a7a 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -6,6 +6,7 @@
 html, body, div, h1, h2, ul, li, p, form, input, textarea, pre {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 
 textarea {
@@ -14,7 +15,6 @@ textarea {
 
 html, input, textarea {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 12pt;
     -webkit-font-smoothing: subpixel-antialiased;
 }
 
@@ -40,8 +40,7 @@ img, hr {
     display: grid;
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(1fr, auto) auto;
-    grid-gap: 6px;
+    grid-template-rows: minmax(1fr, auto) minmax(1fr, auto) auto;
     min-height: 100vh;
     font: -apple-system-body;
     font-family: -apple-system, Segoe UI;
@@ -53,7 +52,12 @@ img, hr {
     background: #fff;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
 }
-
+#header_wrapper, .footer_container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
 #sidebar {
     border-right: 1px solid #ccc;
     color: #222;
@@ -77,7 +81,8 @@ img, hr {
     background: #fefdfe;
     grid-area: content;
     height: 100%;
-    padding: 10px;
+    width: 100%;
+    margin-top: 12px;    
 }
 
 #footer {
@@ -189,16 +194,11 @@ img, hr {
     #header_wrapper, .footer_container {
         margin: 0 auto;
         width: var(--main-width);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
     }
     #wrapper {
         justify-self: center;
         width: var(--main-width);
         display: grid;
-        grid-gap: 10px;
         grid-template-columns: 200px minmax(1fr, max-content);
         grid-template-rows: auto;
         grid-template-areas: "nav feed";
@@ -211,6 +211,7 @@ img, hr {
     }
     #content {
         grid-area: feed;
+        width: 728px;
     }
     #sidebar {
         border: 0;