Fix logo pushing header buttons out of view on certain conditions in mobile layout (#29787)
This commit is contained in:
parent
e85f24174e
commit
4f068d4fcc
|
@ -2612,6 +2612,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
$ui-header-height: 55px;
|
||||
$ui-header-logo-wordmark-width: 99px;
|
||||
|
||||
.ui__header {
|
||||
display: none;
|
||||
|
@ -2627,6 +2628,10 @@ $ui-header-height: 55px;
|
|||
&__logo {
|
||||
display: inline-flex;
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
container: header-logo / inline-size;
|
||||
|
||||
.logo {
|
||||
height: $ui-header-height - 30px;
|
||||
|
@ -2637,7 +2642,7 @@ $ui-header-height: 55px;
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width >= 320px) {
|
||||
@container header-logo (min-width: #{$ui-header-logo-wordmark-width}) {
|
||||
.logo--wordmark {
|
||||
display: block;
|
||||
}
|
||||
|
@ -2654,6 +2659,7 @@ $ui-header-height: 55px;
|
|||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto;
|
||||
|
|
Loading…
Reference in New Issue