bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

TabsBar: fix unauthenticated buttons on mobile

Browse source
This commit is contained in:
Alex Gleason 2021-10-23 14:29:26 -05:00
parent 6d7ce6ffd4
commit 47c68014d0
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/ui/components/tabs_bar.js
View file

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

27
app/styles/components/tabs-bar.scss
View file

@ -44,15 +44,28 @@
&--right { &--right {
margin-left: auto; margin-left: auto;
align-items: center; 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; margin: 0;
order: -1;
.tabs-bar__profile {
margin-left: 0;
}
} }
} }
} }