only render layout colum inner div when column exists, fixes #293

app/soapbox/features/ui/components/columns_area.js

@@ -24,9 +24,11 @@ class ColumnsArea extends ImmutablePureComponent {
           <div className='columns-area__panels'>
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-              <div className='columns-area__panels__pane__inner'>
-                {layout.LEFT}
-              </div>
+              { layout.LEFT &&
+                <div className='columns-area__panels__pane__inner'>
+                  {layout.LEFT}
+                </div>
+              }
             </div>
 
             <div className='columns-area__panels__main'>
@@ -36,9 +38,11 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-              <div className='columns-area__panels__pane__inner'>
-                {layout.RIGHT}
-              </div>
+              { layout.RIGHT &&
+                <div className='columns-area__panels__pane__inner'>
+                  {layout.RIGHT}
+                </div>
+              }
             </div>
           </div>
         </div>

app/soapbox/features/ui/components/link_footer.js

@@ -35,9 +35,9 @@ const mapDispatchToProps = (dispatch) => ({
 const LinkFooter = ({ onOpenHotkeys, account, onClickLogOut }) => (
   <div className='getting-started__footer'>
     <ul>
-      {account && <li><a href='#' onClick={onOpenHotkeys}><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></a> · </li>}
+      {account && <li><a href='#' onClick={onOpenHotkeys}><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></a></li>}
       {/* {account && <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>} */}
-      <li><a href='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a> · </li>
+      <li><a href='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a></li>
       {/* <li><a href='/settings/applications'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li> */}
       {account && <li><Link to='/auth/sign_out' onClick={onClickLogOut}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></Link></li>}
     </ul>

app/styles/components/getting-started.scss

@@ -28,6 +28,14 @@
       display: inline;
     }
 
+    ul li::after {
+      content: ' · ';
+    }
+
+    ul li:last-child::after {
+      content: '';
+    }
+
     p {
       color: hsla(var(--primary-text-color_hsl), 0.8);
       font-size: 13px;