FIXED: Annoying cosmetic bug on mobile view

[DownPW]

@phenomlab

Hello dude

I don’t know if it’s due to that, but you have this bug that we didn’t have before when we selects the notifications or the MPs on the navbar.

The topic header appears in front.

Good night !

[phenomlab]

@downpw thanks. Nothing that can’t be fixed with z-index

[DownPW]

@phenomlab

I see that too for your to do list :

[phenomlab]

@downpw thanks. This fix has caused some other bugs too, so need to fix those also

[phenomlab]

@DownPW those bugs should all be fixed now hopefully

[phenomlab]

As an interesting side note, I’ve noticed that exactly the same bug exists in the NodeBB community forums. Essentially, it’s caused by the sticky header which doesn’t seem to play very well when you are using custom html to render additional content as I do here.

The fix essentially is to make the header (bar) fixed rather than sticky but this does mean you need compensating CSS to resolve the mobile layout issues that this unfortunately creates.

[phenomlab]

Thanks to @crazycells for spotting another bug - this has also been fixed.

[phenomlab]

@downpw Seems like this has been broken for a while ! Not sure why this is, as I never really use it - I type the emojis directly

[DownPW]

@phenomlab said in FIXED: Annoying cosmetic bug on mobile view:

Seems like this has been broken for a while ! Not sure why this is, as I never really use it - I type the emojis directly

No problem.
Maybe that ?

[phenomlab]

@downpw I tried that earlier and rebuilt the assets. Didn’t make any difference.

[phenomlab]

@downpw fixed

Landed up being caused by some rogue CSS from this block

.tab-content {
    max-height: 0;
    padding: 0 2em;
    color: #898989;
    background: #eeeeee;
    transition: all 0.35s;
    margin-top: -5px;
}

Not sure why I’m using that, but clearly it needs to be more specific

[phenomlab]

And now, after all this time I finally discovered that the CSS I previously referenced was for something else - and used the same CSS name, so I’ve had to reinstate this block

.tab-content {
    max-height: 0;
    padding: 0 2em;
    color: #898989;
    background: #eeeeee;
    transition: all 0.35s;
    margin-top: -5px;
}

And, add this below to make it more specific.

.emoji-tabs .tab-content {
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
}