Drawer-with-inset doesn't fully animate to edge of viewport

[kalnode]

Environment

• Operating System: Darwin
• Node Version: v20.15.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: modules, security, routeRules, ui, colorMode, icon, app, devtools, css, vite, content, image, ssr, future, compatibilityDate, components
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @pinia/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt Nuxt UI

Version

v3.1.0

Reproduction

You can actually see the issue right on Nuxt UI's demo page: https://ui.nuxt.com/components/drawer#inset

As an inset drawer closes, watch the viewport edge and notice the drawer doesn't fully animate offscreen; it actually remains visible for a moment before finally disappearing. I think it's easy to miss this subtle thing, however in my custom theme, the background and drawer have high-contrast, so the jankyness is noticeable.

Description

Given a Nuxt UI drawer instance with the inset option...

Issue: When closing an inset drawer, the drawer does not animate fully off the screen. Instead, the drawer animates to zero but is still visible for a moment before ultimately disappearing.

<UDrawer id="myDrawer"
v-model:open="store.myDrawer"
direction="top"
inset
class="myDrawer">
    <template #content>
        <div class="p-4 min-h-32 flex flex-col gap-4 overflow-hidden">
            <SomeComponent />
        </div>
    </template>
</UDrawer>

Current workaround:

This solves it for me, however doesn't take into account other cases.

For the closed state of my drawer-with-inset, I force top to 0.

.myDrawer[data-state='closed'] {
    top: calc(var(--spacing) * 0);
}

Additional context

No response

Logs