fix(AsiderHeader): fix scroll height for panel with header alert (#478)

Author: DakEnviy

src/components/AsideHeader/AsideHeader.scss

@@ -204,15 +204,19 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__panels {
-        z-index: var(--gn-aside-header-panel-z-index, 98);
+        --gn-drawer-z-index: var(--gn-aside-header-panel-z-index, 98);
+
         position: fixed;
         inset: var(--gn-top-alert-height, 0) 0 0;
         overflow: auto;
+        display: flex;
+        flex-direction: column;
         max-height: calc(100vh - var(--gn-top-alert-height, 0));
     }
 
     &__panel {
-        height: 100%;
+        flex-grow: 1;
+        height: auto;
     }
 
     &__pane-container {

src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss

@@ -82,11 +82,17 @@ body {
         width: 300px;
         height: calc(100% - 40px);
         padding: 20px;
+        overflow-y: auto;
     }
 
     &__custom-background {
         opacity: 70%;
     }
+
+    &__user-settings-content {
+        height: 2000px;
+        background: linear-gradient(to bottom, #fff700, #ff0000);
+    }
 }
 
 .composite-bar-showcase__tag {

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -274,7 +274,11 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                     },
                     {
                         id: 'user-settings',
-                        content: <div className={b('settings-panel')}>User Settings</div>,
+                        content: (
+                            <div className={b('settings-panel')}>
+                                <div className={b('user-settings-content')}>User Settings</div>
+                            </div>
+                        ),
                         visible: visiblePanel === Panel.UserSettings,
                     },
                     {

src/components/AsideHeader/components/Panels.tsx

@@ -15,7 +15,7 @@ export const Panels = () => {
             style={{left: size}}
         >
             {panelItems.map((item) => (
-                <DrawerItem key={item.id} {...item} />
+                <DrawerItem key={item.id} className={b('panel')} {...item} />
             ))}
         </Drawer>
     ) : null;