zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 9 Releases Wiki Activity

Fix logo pushing header buttons out of view on certain conditions in mobile layout (#29787)

This commit is contained in:
Claire 2024-03-28 15:00:57 +01:00 committed by GitHub
parent e85f24174e
commit 4f068d4fcc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/styles/mastodon/components.scss
View File

@ -2612,6 +2612,7 @@ a.account__display-name {
} }
$ui-header-height: 55px; $ui-header-height: 55px;
$ui-header-logo-wordmark-width: 99px;
.ui__header { .ui__header {
display: none; display: none;
@ -2627,6 +2628,10 @@ $ui-header-height: 55px;
&__logo { &__logo {
display: inline-flex; display: inline-flex;
padding: 15px; padding: 15px;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
container: header-logo / inline-size;
.logo { .logo {
height: $ui-header-height - 30px; height: $ui-header-height - 30px;
@ -2637,7 +2642,7 @@ $ui-header-height: 55px;
display: none; display: none;
} }
@media screen and (width >= 320px) { @container header-logo (min-width: #{$ui-header-logo-wordmark-width}) {
.logo--wordmark { .logo--wordmark {
display: block; display: block;
} }
@ -2654,6 +2659,7 @@ $ui-header-height: 55px;
gap: 10px; gap: 10px;
padding: 0 10px; padding: 0 10px;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
.button { .button {
flex: 0 0 auto; flex: 0 0 auto;