From 455cb6f575e27dd4b3326ca4553403a4d44de5ea Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Sat, 15 Aug 2020 18:19:27 -0500
Subject: [PATCH] only render layout colum inner div when column exists, fixes
 #293

---
 .../features/ui/components/columns_area.js       | 16 ++++++++++------
 .../features/ui/components/link_footer.js        |  4 ++--
 app/styles/components/getting-started.scss       |  8 ++++++++
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/ui/components/columns_area.js b/app/soapbox/features/ui/components/columns_area.js
index cc35321b2..6a29799cc 100644
--- a/app/soapbox/features/ui/components/columns_area.js
+++ b/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>
diff --git a/app/soapbox/features/ui/components/link_footer.js b/app/soapbox/features/ui/components/link_footer.js
index 9aba3f0dc..5ceabfe63 100644
--- a/app/soapbox/features/ui/components/link_footer.js
+++ b/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>
diff --git a/app/styles/components/getting-started.scss b/app/styles/components/getting-started.scss
index 92e37fe16..0aef52bad 100644
--- a/app/styles/components/getting-started.scss
+++ b/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;