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: pnpm@9.15.5
• Builder: -
• User Config: modules, security, routeRules, ui, colorMode, icon, app, devtools, css, vite, content, image, ssr, future, compatibilityDate, components
• Runtime Modules: @nuxt/content@3.5.1, @nuxt/ui@3.1.0, @nuxt/image@1.10.0, @pinia/nuxt@0.10.1, nuxt-security@2.2.0
• 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.

After the drawer close animation completes, the drawer is still actually visible for a moment before finally disappearing. It animated fully, yes, but the animation doesn't take into account the extra distance needed because of inset. I think it's easy to miss this subtle thing on the demos page, 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