From d041c19f97b8f3ea56d5b56eb76bf94ae83433d6 Mon Sep 17 00:00:00 2001
From: Georgy Malkov <malkovgv@yandex-team.ru>
Date: Wed, 22 Nov 2023 17:34:14 +0300
Subject: [PATCH] fix: change root element var

---
 src/components/AsideHeader/AsideHeader.scss           |  6 ++----
 src/components/AsideHeader/useAsideHeaderTopPanel.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
index 2debc5d..f722e75 100644
--- a/src/components/AsideHeader/AsideHeader.scss
+++ b/src/components/AsideHeader/AsideHeader.scss
@@ -2,10 +2,6 @@
 
 $block: '.#{variables.$ns}aside-header';
 
-:root {
-    --gn-aside-top-panel-height: 0px;
-}
-
 .g-root {
     --gn-aside-header-background-color: var(--g-color-base-warning-light);
     --gn-aside-header-collapse-button-divider-line-color: var(
@@ -14,6 +10,8 @@ $block: '.#{variables.$ns}aside-header';
     --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-item-icon-background-size: 38px;
+
+    --gn-aside-top-panel-height: 0px;
 }
 
 .g-root_theme_light,
diff --git a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
index f8e97a2..17c5d69 100644
--- a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
+++ b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
@@ -8,6 +8,8 @@ type AsideHeaderTopPanel = {
     updateTopSize: () => void;
 };
 
+const G_ROOT_CLASS_NAME = 'g-root';
+
 const useRefHeight = (ref: React.RefObject<HTMLDivElement>) => {
     const [topHeight, setTopHeight] = React.useState(0);
     React.useEffect(() => {
@@ -28,10 +30,10 @@ export const useAsideHeaderTopPanel = ({
     const topHeight = useRefHeight(topRef);
 
     const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {
-        document.documentElement.style.setProperty(
-            '--gn-aside-top-panel-height',
-            clientHeight + 'px',
-        );
+        const gRootElement = document
+            .getElementsByClassName(G_ROOT_CLASS_NAME)
+            .item(0) as HTMLElement | null;
+        gRootElement?.style.setProperty('--gn-aside-top-panel-height', clientHeight + 'px');
     }, []);
 
     const updateTopSize = React.useCallback(() => {