Weird behavior by order prop

[a0a7]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I have a layout with two panels that flip-flop depending on whether the user is on mobile or desktop. Setting the order prop, as one might expect, is not doing this: to actually get them to swap orders additional css has to be used on the paneforge components. In my case it looks like this:

<PaneGroup class="flex flex-row">
    <Pane class={onMobile ? "order-3" : "order-1"} order={onMobile ? 1 : 2} />
    <Handle class="order-2" />
    <Pane class={onMobile ? "order-1" : "order-3"} order={onMobile ? 2 : 1} />
</PaneGroup>

The flex order is what actually sets the order of the components, and without including the flex order the components remain in the order that they appear in the svelte file. The order prop alone does not do this. Is this intended behavior?

I would be happy with my flex solution, but I can't make the handle work properly. It moves in the opposite direction to which it is dragged on either mobile or desktop, with no way to get around it. I say "either mobile or desktop", because which one it is changes depending on the value of the order props to the two panes. I've been stuck trying to figure out why it does this for two hours, but I can't figure it out.

Regardless, great library, thank you for your work!

[a0a7]

Somehow this layout has the issue

<div class="h-screen w-screen">
somehow this layout has the issue
<Resizable.PaneGroup direction="vertical" class="w-full h-full">
        <Resizable.Pane class="map-pane" defaultSize={60} >
        </Resizable.Pane>
        <Resizable.Handle class="" />
    <Resizable.Pane 
        class=""
        defaultSize={40}
    >
    </Resizable.Pane>
</Resizable.PaneGroup>
</div>

while this does not

<div class="h-screen w-screen">
<Resizable.PaneGroup direction="vertical" class="w-full h-full">
    {#if onMobile}
        <Resizable.Pane class="map-pane" defaultSize={60} >
        </Resizable.Pane>
        <Resizable.Handle class="" />
    {/if}
    <Resizable.Pane 
        class=""
        defaultSize={40}
    >
    </Resizable.Pane>
</Resizable.PaneGroup>
</div>

I guess it has something to do with the loading of content in if blocks.

[huntabyte]

Hey there! Mind spinning up a reproduction of this using this template? Will help me identify/troubleshoot the issue much easier! Thank you!