From e38d99b83c327d6415a965bc89ee6d73cfde9c96 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Sat, 31 May 2025 14:46:17 +0300
Subject: [PATCH 1/3] fix: drawer is broken

---
 src/components/Drawer/Drawer.tsx        | 53 ++++++++++++++-----------
 src/components/Drawer/DrawerContext.tsx |  5 +++
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 5db957419..95defbbcf 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
-import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Flex, Icon, Portal, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {isNumeric} from '../../utils/utils';
@@ -52,7 +52,7 @@ const DrawerPaneContentWrapper = ({
     });
 
     const drawerRef = React.useRef<HTMLDivElement>(null);
-    const {containerWidth} = useDrawerContext();
+    const {containerWidth, itemContainerRef} = useDrawerContext();
     // Calculate drawer width based on container width percentage if specified
     const calculatedWidth = React.useMemo(() => {
         if (isPercentageWidth && containerWidth > 0) {
@@ -103,29 +103,36 @@ const DrawerPaneContentWrapper = ({
         (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true;
     };
 
+    const itemContainer = itemContainerRef?.current;
+    if (!itemContainer) {
+        return null;
+    }
+
     return (
-        <GravityDrawer
-            onEscape={onClose}
-            onVeilClick={onClose}
-            hideVeil
-            className={b('container', className)}
-        >
-            <DrawerItem
-                id={drawerId}
-                visible={isVisible}
-                resizable
-                maxResizeWidth={containerWidth}
-                width={isPercentageWidth ? calculatedWidth : drawerWidth}
-                onResize={handleResizeDrawer}
-                direction={direction}
-                className={b('item')}
-                ref={detectClickOutside ? drawerRef : undefined}
+        <Portal container={itemContainer}>
+            <GravityDrawer
+                onEscape={onClose}
+                onVeilClick={onClose}
+                hideVeil
+                className={b('container', className)}
             >
-                <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
-                    {children}
-                </div>
-            </DrawerItem>
-        </GravityDrawer>
+                <DrawerItem
+                    id={drawerId}
+                    visible={isVisible}
+                    resizable
+                    maxResizeWidth={containerWidth}
+                    width={isPercentageWidth ? calculatedWidth : drawerWidth}
+                    onResize={handleResizeDrawer}
+                    direction={direction}
+                    className={b('item')}
+                    ref={detectClickOutside ? drawerRef : undefined}
+                >
+                    <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
+                        {children}
+                    </div>
+                </DrawerItem>
+            </GravityDrawer>
+        </Portal>
     );
 };
 
diff --git a/src/components/Drawer/DrawerContext.tsx b/src/components/Drawer/DrawerContext.tsx
index b54d06e39..d0aa2b61a 100644
--- a/src/components/Drawer/DrawerContext.tsx
+++ b/src/components/Drawer/DrawerContext.tsx
@@ -8,11 +8,13 @@ const b = cn('ydb-drawer');
 
 export interface DrawerContextType {
     containerWidth: number;
+    itemContainerRef: React.RefObject<HTMLDivElement> | null;
     setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const DrawerContext = React.createContext<DrawerContextType>({
     containerWidth: 0,
+    itemContainerRef: null,
     setContainerWidth: () => {},
 });
 
@@ -24,6 +26,7 @@ interface DrawerContextProviderProps {
 export const DrawerContextProvider = ({children, className}: DrawerContextProviderProps) => {
     const [containerWidth, setContainerWidth] = React.useState(0);
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const itemContainerRef = React.useRef<HTMLDivElement>(null);
 
     React.useEffect(() => {
         if (!containerRef.current) {
@@ -55,6 +58,7 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         () => ({
             containerWidth,
             setContainerWidth,
+            itemContainerRef,
         }),
         [containerWidth],
     );
@@ -63,6 +67,7 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         <DrawerContext.Provider value={value}>
             <div ref={containerRef} className={b('drawer-container', className)}>
                 {children}
+                <div ref={itemContainerRef} className={b('item-container')} />
             </div>
         </DrawerContext.Provider>
     );

From 7c5aeba3df2bc23e0a16eca4d315fd712cd3c8f2 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Sat, 31 May 2025 14:56:11 +0300
Subject: [PATCH 2/3] fix: add comment

---
 src/components/Drawer/DrawerContext.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Drawer/DrawerContext.tsx b/src/components/Drawer/DrawerContext.tsx
index d0aa2b61a..fea2a627c 100644
--- a/src/components/Drawer/DrawerContext.tsx
+++ b/src/components/Drawer/DrawerContext.tsx
@@ -67,6 +67,7 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         <DrawerContext.Provider value={value}>
             <div ref={containerRef} className={b('drawer-container', className)}>
                 {children}
+                {/* Children styles should not affect drawer container behaviour so we mount it out of children */}
                 <div ref={itemContainerRef} className={b('item-container')} />
             </div>
         </DrawerContext.Provider>

From f342d69c7c9533f5b0157f4605c38ab89b132152 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@yandex-team.ru>
Date: Sat, 31 May 2025 14:56:54 +0300
Subject: [PATCH 3/3] fix: comment

---
 src/components/Drawer/DrawerContext.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Drawer/DrawerContext.tsx b/src/components/Drawer/DrawerContext.tsx
index fea2a627c..495f28e8a 100644
--- a/src/components/Drawer/DrawerContext.tsx
+++ b/src/components/Drawer/DrawerContext.tsx
@@ -67,7 +67,10 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         <DrawerContext.Provider value={value}>
             <div ref={containerRef} className={b('drawer-container', className)}>
                 {children}
-                {/* Children styles should not affect drawer container behaviour so we mount it out of children */}
+                {/* 
+                    Children styles should not affect drawer container behaviour 
+                    So we mount it out of children in a separate portal
+                */}
                 <div ref={itemContainerRef} className={b('item-container')} />
             </div>
         </DrawerContext.Provider>