Fix: modal content getting covered by Drawer Vaul

[aritradevelops]

Fixes #1609

Issue Description

The common Modal Component built on top of Drawer from Vaul ships with some default css which is introducing an overlay with an ::after attribute on top of the modal content on smaller devices. See the below images

Now if you take a good look at data-attributes the css activates on two condition when direction is bottom and no custom-container is not passed, which is our case.

Trials

1. I have tried using negative z index that makes the content visible but the after block with 200% height is there so the layer is scrollable without any content over there. (x)
2. I have tried changing different attributes to the Drawer element used in Modal Component but got no luck. (x)
3. The Drawer Component does not allow to overwrite its className, it does not accept the className attribute.(x)
4. Providing Custom container gives Client Rect Boundary error.(x)

Fix

The only way to grab the element and set its height properly was to use css and as every component is sharing the same modal therefore it is a global issue so added the css in global.css file.

After the fix

Verified that it works on smaller devices as well as tabs and laptops. Find the screen shots below

[vercel]

@aritradevelops is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[aritradevelops]

Merge branch 'main' into aritradevelops:fix/modal_overwritting_content