bug fixes
This commit is contained in:
@@ -62,6 +62,22 @@ const Drawer: React.FC<DrawerProps> = ({
|
||||
useEffect(() => {
|
||||
if (!opened || !contentRef.current) return;
|
||||
|
||||
const updateDrawerHeight = () => {
|
||||
if (contentRef.current) {
|
||||
const drawerContent = contentRef.current;
|
||||
const visualViewport = window.visualViewport;
|
||||
|
||||
if (visualViewport) {
|
||||
const availableHeight = visualViewport.height;
|
||||
const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
|
||||
|
||||
drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
|
||||
} else {
|
||||
drawerContent.style.maxHeight = '75vh';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (contentRef.current) {
|
||||
const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
|
||||
@@ -72,15 +88,24 @@ const Drawer: React.FC<DrawerProps> = ({
|
||||
}
|
||||
});
|
||||
|
||||
updateDrawerHeight();
|
||||
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', updateDrawerHeight);
|
||||
}
|
||||
|
||||
resizeObserver.observe(contentRef.current);
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.removeEventListener('resize', updateDrawerHeight);
|
||||
}
|
||||
};
|
||||
}, [opened, children]);
|
||||
|
||||
return (
|
||||
<VaulDrawer.Root open={opened} onOpenChange={onChange}>
|
||||
<VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
|
||||
<VaulDrawer.Portal>
|
||||
<VaulDrawer.Overlay className={styles.drawerOverlay} />
|
||||
<VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
|
||||
|
||||
Reference in New Issue
Block a user