Fix NavigationBar styling

app/javascript/flavours/glitch/features/compose/components/navigation_bar.js

@@ -20,16 +20,18 @@ export default class NavigationBar extends ImmutablePureComponent {
           <Avatar account={this.props.account} size={48} />
         </Permalink>
 
-        <Permalink className='acct' href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
+        <div className='navigation-bar__profile'>
-          <strong>@{this.props.account.get('acct')}</strong>
+          <Permalink className='acct' href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
-        </Permalink>
+            <strong>@{this.props.account.get('acct')}</strong>
+          </Permalink>
 
-        { profileLink !== undefined && (
+          { profileLink !== undefined && (
-          <a
+            <a
-            className='edit'
+              className='edit'
-            href={ profileLink }
+              href={ profileLink }
-          ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+            ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
-        )}
+          )}
+        </div>
       </div>
     );
   };

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -163,18 +163,15 @@
 .drawer--account {
   padding: 10px;
   color: $darker-text-color;
+  display: flex;
+  align-items: center;
 
-  & > a {
+  a {
     color: inherit;
     text-decoration: none;
   }
 
-  & > .avatar {
+  .acct {
-    float: left;
-    margin-right: 10px;
-  }
-
-  & > .acct {
     display: block;
     color: $secondary-text-color;
     font-weight: 500;
@@ -184,6 +181,12 @@
   }
 }
 
+.navigation-bar__profile {
+  flex: 1 1 auto;
+  margin-left: 8px;
+  overflow: hidden;
+}
+
 .drawer--results {
   background: $ui-base-color;
   overflow-x: hidden;