monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix logo pushing header buttons out of view on certain conditions in mobile layout 

Port 4f068d4fcc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2024-03-28 15:00:57 +01:00
parent cc720cd38f
commit bc370938ef
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/flavours/glitch/styles/components.scss
View File

@ -2826,6 +2826,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;
@ -2841,6 +2842,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;
@ -2851,7 +2856,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;
} }
@ -2868,6 +2873,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;