fix: global scroll without top alert (#157)

gravity-ui · Nov 23, 2023 · 8648858 · 8648858
1 parent 0d49fda
commit 8648858
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx
@@ -24,7 +24,10 @@ export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(
         return (
             <PageLayout compact={compact} className={className} topAlert={topAlert}>
                 <PageLayoutAside ref={ref} {...props} />
-                <PageLayout.Content renderContent={props.renderContent} />
+                <PageLayout.Content
+                    renderContent={props.renderContent}
+                    withTop={Boolean(topAlert)}
+                />
             </PageLayout>
         );
     },

diff --git a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx
@@ -31,14 +31,18 @@ const Layout = ({compact, reverse, className, children, topAlert}: PageLayoutPro
     );
 };
 
-const ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({
-    children,
-    renderContent,
-}) => {
+const ConnectedContent: React.FC<
+    PropsWithChildren<Pick<ContentProps, 'renderContent' | 'withTop'>>
+> = ({children, withTop, renderContent}) => {
     const {size} = useAsideHeaderContext();
 
     return (
-        <Content size={size} className={b('content')} renderContent={renderContent}>
+        <Content
+            withTop={withTop}
+            size={size}
+            className={b('content')}
+            renderContent={renderContent}
+        >
             {children}
         </Content>
     );

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
@@ -8,6 +8,7 @@ export interface ContentProps {
     size: number;
     className?: string;
     cssSizeVariableName?: string;
+    withTop?: boolean;
     renderContent?: RenderContentType;
 }
 
@@ -26,15 +27,19 @@ export const Content: React.FC<ContentProps> = ({
     size, // TODO: move to context when MobileHeader will support it
     className,
     cssSizeVariableName = '--gn-aside-header-size',
+    withTop,
     renderContent,
     children,
 }) => {
     const style: React.CSSProperties = {
         [cssSizeVariableName]: `${size}px`,
-        maxHeight: 'calc(100vh - var(--gn-aside-top-panel-height))',
-        overflowY: 'auto',
     };
 
+    if (withTop) {
+        style.maxHeight = 'calc(100vh - var(--gn-aside-top-panel-height))';
+        style.overflowY = 'auto';
+    }
+
     return (
         <div className={className} style={style}>
             {typeof renderContent === 'function' ? (