fix(Drawer): header styles (#2242)

Author: Raubzeug

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%;
+    }
 }

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>
     );