TabsBar: fix unauthenticated buttons on mobile

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

@@ -143,7 +143,7 @@ class TabsBar extends React.PureComponent {
                 </button>
               </>
             ) : (
-              <div className='flex'>
+              <div className='tabs-bar__unauthenticated'>
                 <Link className='tabs-bar__button button' to='/auth/sign_in'>
                   <FormattedMessage id='account.login' defaultMessage='Log In' />
                 </Link>

app/styles/components/tabs-bar.scss

@@ -44,15 +44,28 @@
     &--right {
       margin-left: auto;
       align-items: center;
+    }
+  }
 
-      // Move Profile menu to the left on mobile
-      @media screen and (max-width: 450px) {
+  @media screen and (max-width: 450px) {
+    // Move Profile menu to the left on mobile
+    &__split--right {
+      margin: 0;
+      order: -1;
+      width: 100%;
+    }
+
+    &__profile {
+      margin-left: 0;
+    }
+
+    &__unauthenticated {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .tabs-bar__button {
         margin: 0;
-        order: -1;
-
-        .tabs-bar__profile {
-          margin-left: 0;
-        }
       }
     }
   }