fix: drawer panel height

gravity-ui · Nov 22, 2023 · a0c63d2 · a0c63d2
1 parent 18b751e
commit a0c63d2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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 {