@DownPW I see the issue. Can you please make the below CSS changes - notice the ones commented out and their replacements (which you should follow)
.page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
border-left: none;
/* transition: transform 0.3s ease !important; */
transition: margin-left 0.3s ease, margin-right 0.3s ease !important;
background: var(--bs-body-bg);
border-radius: var(--bs-border-radius);
}
li[component=post].threaded {
/* transform: translateX(-100px); */
/* transition: transform 0.3s ease !important; */
margin-left: -75px !important;
transition: margin-left 0.3s ease, margin-right 0.3s ease !important;
}
My expectation is that this will still work (but using margin
instead of transform
), and also ensure that the reverse dropdown is not being hidden by the [component="post"]
elements.
When you use transform
on an element, a new stacking order is created for it. As you are transforming a parent which doesn’t have z-index
of it’s own, a new stacking order for itself and child elements is created. As a result, the child element with z-index
remains below the [component="post"]
elements.
If you want to see this in action before applying the CSS, you can remove translateX(-100px)
from the li[component=post].threaded
class and then try the dropdown menu again. You’ll notice it appears correctly this time, although the content is not being shifted because the translate
has been removed.
We replace it with margin
which is slightly less performant when it comes to animation, but the nature of NodeBB is to lazyload posts, therefore, this negates the overall impact to the DOM
.
Let me know if this works.