Ive got a div that I use to show errors to my users by having it appear at the top of the page on the y-axis. However, when the container gets removed and phx-remove gets called it seemingly teleports under the element under it, but not at the very bottom (in between div one and div two in the code below) before finally getting removed.
This is my message container
<div
:if={@message}
id="message-container"
class="bg-rose-400 p-10 rounded-2xl shadow-[0.25rem_0.25rem_0_0px] shadow-rose-700 mb-6"
phx-mounted={JS.transition("animate-pop-in", time: 500)}
phx-remove={JS.transition("animate-pop-out", time: 500)}
>
<p class="text-center text-white text-2xl font-[Anybody-Black] select-none"><%= @message %></p>
</div>
<div id="one"> ... </div>
This is where the element teleports to
<div id="two> ... </div>
and the outer container that holds this message div + the other elements looks like
<main class="mt-10">
<div class="mx-auto max-w-xs md:max-w-lg" id="Game-Session" phx-hook="Session">
<.flash_group flash={@flash} />
<%= @inner_content %>
</div>
</main>
Ive had this issue in the past, and before I had the container in an if statement using <%= if @message do %> ... <% end %> and what fixed it at the time was switching to :if={@message} but the issue has come back.
Any ideas on how I could fix this?
