From a0c63d221dcc909d8dc7e998f55a6292724875f8 Mon Sep 17 00:00:00 2001
From: Georgy Malkov <malkovgv@yandex-team.ru>
Date: Wed, 22 Nov 2023 16:12:17 +0300
Subject: [PATCH] fix: drawer panel height

---
 src/components/AsideHeader/AsideHeader.scss   |  3 ++-
 .../__stories__/AsideHeaderShowcase.scss      |  2 +-
 .../AsideHeader/useAsideHeaderTopPanel.tsx    | 21 ++++++++++++-------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
index 429f625..2debc5d 100644
--- a/src/components/AsideHeader/AsideHeader.scss
+++ b/src/components/AsideHeader/AsideHeader.scss
@@ -181,8 +181,9 @@ $block: '.#{variables.$ns}aside-header';
         left: 0;
         right: 0;
         bottom: 0;
-        top: 0;
+        top: var(--gn-aside-top-panel-height);
         overflow: auto;
+        max-height: calc(100vh - var(--gn-aside-top-panel-height));
     }
 
     &__panel {
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
index a4f320e..3f10888 100644
--- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
+++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -80,7 +80,7 @@ body {
     &__settings-panel,
     &__search-panel {
         width: 300px;
-        height: 100%;
+        height: calc(100% - 40px);
         padding: 20px;
     }
 }
diff --git a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
index 88a3805..f8e97a2 100644
--- a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
+++ b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
@@ -27,16 +27,18 @@ export const useAsideHeaderTopPanel = ({
     const topRef = React.useRef<HTMLDivElement>(null);
     const topHeight = useRefHeight(topRef);
 
+    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {
+        document.documentElement.style.setProperty(
+            '--gn-aside-top-panel-height',
+            clientHeight + 'px',
+        );
+    }, []);
+
     const updateTopSize = React.useCallback(() => {
         if (topRef.current) {
-            const clientHeight = topRef.current?.clientHeight || 0;
-
-            document.documentElement.style.setProperty(
-                '--gn-aside-top-panel-height',
-                clientHeight + 'px',
-            );
+            setAsideTopPanelHeight(topRef.current?.clientHeight || 0);
         }
-    }, [topRef]);
+    }, [topRef, setAsideTopPanelHeight]);
 
     React.useLayoutEffect(() => {
         const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});
@@ -45,7 +47,10 @@ export const useAsideHeaderTopPanel = ({
             window.addEventListener('resize', updateTopSizeDebounce);
             updateTopSizeDebounce();
         }
-        return () => window.removeEventListener('resize', updateTopSizeDebounce);
+        return () => {
+            window.removeEventListener('resize', updateTopSizeDebounce);
+            setAsideTopPanelHeight(0);
+        };
     }, [topAlert, topHeight, topRef, updateTopSize]);
 
     return {