drawer height change on input focus

[utsav-flex]

i have created one component using shadcn UI drawer, also i have put my code,

but in this code if i try to open the drawer and then i focused on input field then drawer change its height and touch at top edge of mobile screen in real device. also i have upload real device screen shots.

1. https://prnt.sc/xwufebsSLqWs
2. https://prnt.sc/Pt_L_SjRVHhe

`"use client";
import { useState } from "react";
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Pencil } from "lucide-react";

export const Example = () => {
const [openCardStyle, setOpenCardStyle] = useState(false);
return (

<DrawerTrigger
onClick={() => setOpenCardStyle(true)}
className="flex items-center gap-2 font-medium bg-black text-sm text-white py-1.5 px-3 rounded-lg z-10 absolute bottom-4 left-1/2 -translate-x-1/2"
>
Edit

New Project


Get started by filling in the information below to create your new
project.

Project name



Description

<textarea rows={6} className="border border-gray-200 bg-white w-full resize-none rounded-lg p-3 pt-2.5 text-gray-900 outline-none focus:ring-2 focus:ring-black/5 focus:ring-offset-0" />

      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s, when an unknown printer took a galley of type
        and scrambled it to make a type specimen book. It has survived not
        only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s
        with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus
        PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply
        dummy text of the printing and typesetting industry. Lorem Ipsum has
        been the industry's standard dummy text ever since the 1500s, when
        an unknown printer took a galley of type and scrambled it to make a
        type specimen book. It has survived not only five centuries, but
        also the leap into electronic typesetting, remaining essentially
        unchanged. It was popularised in the 1960s with the release of
        Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including
        versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown
        printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the
        leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets
        containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem
        Ipsum.
      </p>
    </div>
    <div className="p-4">
      <button className="h-[44px] bg-black text-gray-50 rounded-lg w-full font-medium">
        Submit
      </button>
    </div>
  </DrawerContent>
</Drawer>

);
};`

also i take trial without useState hook, it is working fine, below i have add my commented code screen shot,
comment code: https://prnt.sc/TfeIp0ZXSeW9
real device screen shots
initial state: https://prnt.sc/ag3QgeDRdzOv
while focused on input: https://prnt.sc/N9pXJRod8fPD