diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/navigation_bar.js | 20 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/drawer.scss | 17 |
2 files changed, 21 insertions, 16 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 3148434f1..f6bfbdd1e 100644 --- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js +++ b/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')}`}> - <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> + )} + </div> </div> ); }; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index f054ddbc0..0e50482f6 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; |