mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues 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>
pull/2699/head
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-logo-wordmark-width: 99px;
.ui__header {
display: none;
@ -2841,6 +2842,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;
@ -2851,7 +2856,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;
}
@ -2868,6 +2873,7 @@ $ui-header-height: 55px;
gap: 10px;
padding: 0 10px;
overflow: hidden;
flex-shrink: 0;
.button {
flex: 0 0 auto;