Fix NavigationBar styling

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

@@ -20,6 +20,7 @@ export default class NavigationBar extends ImmutablePureComponent {
           <Avatar account={this.props.account} size={48} />
         </Permalink>
 
+        <div className='navigation-bar__profile'>
           <Permalink className='acct' href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
             <strong>@{this.props.account.get('acct')}</strong>
           </Permalink>
@@ -31,6 +32,7 @@ export default class NavigationBar extends ImmutablePureComponent {
             ><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;