Splitter disappearing when using maxSize

[dtlhlbs]

I am using Allotment with Mantine AppShell:

<AppShell navbar={{ width: 80, breakpoint: 'sm' }}>
    <AppShell.Navbar>
        <NavBar />
    </AppShell.Navbar>
    <AppShell.Main style={{ height: '100vh', width: '100vw' }}>
        <Allotment>
            <Allotment.Pane minSize={200} preferredSize={300} maxSize={400}>
                <div>Pane 1</div>
            </Allotment.Pane>
            <Allotment.Pane snap>
                <Outlet />
            </Allotment.Pane>
        </Allotment>
    </AppShell.Main>
</AppShell>

When I set the maxSize the splitter disappears. It's there but I have to hunt for it. The right pane content also disappears. When I find the splitter using hover I can select it, but it won't drag left, until I select it for the second time. The first time I select it and drag left (which fails), the content reappears.

Recording.2025-12-23.103811.mp4

[dtlhlbs]

It looks like using snap on the right-hand pane causes it to disappear when the left-hand panel reaches its maximum size. This isn'[t what I'd expect since I'm resizing the left panel, not the one to the right.

<AppShell navbar={{ width: 80, breakpoint: 'sm' }}>
    <AppShell.Navbar>
        <NavBar />
    </AppShell.Navbar>
    <AppShell.Main style={{ height: '100vh', width: '100vw' }}>
        <Allotment>
            <Allotment.Pane snap minSize={200} preferredSize={200} maxSize={300}>
                <div>Pane1</div>
            </Allotment.Pane>
            <Allotment.Pane snap minSize={200} preferredSize={300} maxSize={400}>
                <div>Pane2</div>
            </Allotment.Pane>
            <Allotment.Pane>
                <div>Pane3</div>
            </Allotment.Pane>
        </Allotment>
    </AppShell.Main>
</AppShell>

Recording.2025-12-23.104725.mp4

[dtlhlbs]

I can also cause Pane1 to disappear (snap to 0) when resizing Pane3. I'd have thought snap only applies when resizing that pane, not other panes.

<AppShell navbar={{ width: 80, breakpoint: 'sm' }}>
    <AppShell.Navbar>
        <NavBar />
    </AppShell.Navbar>
    <AppShell.Main style={{ height: '100vh', width: '100vw' }}>
        <Allotment>
            <Allotment.Pane snap minSize={200} preferredSize={200} maxSize={300}>
                <div>Pane1</div>
            </Allotment.Pane>
            <Allotment.Pane minSize={200} preferredSize={300} maxSize={400}>
                <div>Pane2</div>
            </Allotment.Pane>
            <Allotment.Pane>
                <div>Pane3</div>
            </Allotment.Pane>
        </Allotment>
    </AppShell.Main>
</AppShell>

Recording.2025-12-23.105130.mp4