port glitch-soc@`38d2882` to monsterfork: Fix NavigationBar styling

2 files changed, 24 insertions, 19 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js
index 5faf2b509..8dea6f5b4 100644
--- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js
+++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js
@@ -20,20 +20,22 @@ 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')}`}>
-          <strong>@{this.props.account.get('acct')}</strong>
-        </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>
 
-        { profileLink !== undefined && (
-          <a
-            className='edit'
-            href={ profileLink }
-          ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
-        )}
+          { profileLink !== undefined && (
+            <a
+              className='edit'
+              href={ profileLink }
+            ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+          )}
 
-        <Permalink className='drafts' href='/tags/self.draft' to='/timelines/tag/self.draft'>
-          <FormattedMessage id='navigation_bar.drafts' defaultMessage='Show drafts' />
-        </Permalink>
+          <Permalink className='drafts' href='/tags/self.draft' to='/timelines/tag/self.draft'>
+            <FormattedMessage id='navigation_bar.drafts' defaultMessage='Show drafts' />
+          </Permalink>
+        </div>
       </div>
     );
   };
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 3752365d7..602489abb 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/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 {
-    float: left;
-    margin-right: 10px;
-  }
-
-  & > .acct {
+  .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;