Fix logged-out web UI on smaller screens (#19263)

1 files changed, 11 insertions, 5 deletions

diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index 00ae04761..7c7c9056f 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -23,9 +23,10 @@ export default class NavigationPanel extends React.Component {
 
     return (
       <div className='navigation-panel'>
-        <Link to='/' className='column-link column-link--logo'><Logo /></Link>
-
-        <hr />
+        <div className='navigation-panel__logo'>
+          <Link to='/' className='column-link column-link--logo'><Logo /></Link>
+          <hr />
+        </div>
 
         {signedIn && (
           <React.Fragment>
@@ -40,10 +41,10 @@ export default class NavigationPanel extends React.Component {
         <NavLink className='column-link column-link--transparent' exact to='/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
 
         {!signedIn && (
-          <React.Fragment>
+          <div className='navigation-panel__sign-in-banner'>
             <hr />
             <SignInBanner />
-          </React.Fragment>
+          </div>
         )}
 
         {signedIn && (
@@ -62,6 +63,11 @@ export default class NavigationPanel extends React.Component {
           </React.Fragment>
         )}
 
+        <div className='navigation-panel__legal'>
+          <hr />
+          <NavLink className='column-link column-link--transparent' to='/about'><Icon className='column-link__icon' id='ellipsis-h' fixedWidth /><FormattedMessage id='navigation_bar.about' defaultMessage='About' /></NavLink>
+        </div>
+
         {showTrends && (
           <React.Fragment>
             <div className='flex-spacer' />