[Bug]: Drawer Input is behind keyboard on mobile devices

[pandikapinata]

Reproduction

Try use Drawer Component with form inside it, then open on mobile devices, you can see the keyboard cover your form input

Describe the bug

I've tried to use Drawer on my web, but apparently has issue like raised on here:
shadcn-ui/ui#2849
emilkowalski/vaul#294

Preview (https://www.shadcn-vue.com/docs/components/drawer.html#responsive-dialog)

Expected Outcome (https://ui.shadcn.com/docs/components/drawer#responsive-dialog)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
    Memory: 3.29 GB / 15.69 GB
  Binaries:
    Node: 22.4.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vueuse/core: ^10.11.0 => 10.11.0
    radix-vue: ^1.9.11 => 1.9.11
    vue: ^3.4.0 => 3.4.31

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[artyom12211]

+1.
It breaks only in safari browser. I hope you can handle that.

[TechNerdsUzi]

Add this in your html meta tag like this
interactive-widget=resizes-content

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content" />

It works for me on react

[joshwaaaah]

Add this in your html meta tag like this

interactive-widget=resizes-content

`<meta name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content" />`

It works for me on react

I think this might have accessibility implications unfortunately. In doing this I believe we'd be disabling the ability to zoom, which is a WCAG criterion.