From eda8859870f9e7b1cb854391d73168ba5a4d8a41 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Wed, 30 Apr 2025 17:15:27 +0300
Subject: [PATCH] fix(Drawer): header styles

---
 src/components/Drawer/Drawer.scss | 19 +++++++++++++++++++
 src/components/Drawer/Drawer.tsx  | 12 +++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
index a440245739..f93c4517ba 100644
--- a/src/components/Drawer/Drawer.scss
+++ b/src/components/Drawer/Drawer.scss
@@ -16,4 +16,23 @@
     &__controls {
         margin-left: auto;
     }
+
+    &__header-wrapper {
+        position: sticky;
+        z-index: 3;
+        top: 0;
+        left: 0;
+
+        padding: var(--g-spacing-4) var(--g-spacing-4) 0 var(--g-spacing-6);
+
+        background-color: var(--g-color-base-background);
+    }
+
+    &__content-wrapper {
+        display: flex;
+        overflow: auto;
+        flex-direction: column;
+
+        height: 100%;
+    }
 }
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 46282abeef..329c450306 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} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {isNumeric} from '../../utils/utils';
@@ -184,8 +184,8 @@ export const DrawerWrapper = ({
         }
 
         return (
-            <Flex justifyContent="space-between" className={headerClassName}>
-                {title}
+            <Flex justifyContent="space-between" className={b('header-wrapper', headerClassName)}>
+                <Text variant="subheader-2">{title}</Text>
                 <Flex className={b('controls')}>{controls}</Flex>
             </Flex>
         );
@@ -205,8 +205,10 @@ export const DrawerWrapper = ({
                 detectClickOutside={detectClickOutside}
                 isPercentageWidth={isPercentageWidth}
             >
-                {renderDrawerHeader()}
-                {renderDrawerContent()}
+                <div className={b('content-wrapper')}>
+                    {renderDrawerHeader()}
+                    {renderDrawerContent()}
+                </div>
             </DrawerPaneContentWrapper>
         </React.Fragment>
     );