Merge pull request #5470 from novuhq/nv-3707-fix-sidebar-overflow

fix(web): sidebar overflow issue
novuhq · Apr 29, 2024 · d6fcd86 · d6fcd86
2 parents f8d31ba + 69c7b9e
commit d6fcd86
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/libs/design-system/src/sidebar/Sidebar.styles.ts b/libs/design-system/src/sidebar/Sidebar.styles.ts
@@ -15,11 +15,22 @@ export const HeaderHolder = styled.div`
   margin-bottom: 0;
 `;
 
-export const scrollable = css`
+const scrollable = `
   overflow-x: hidden;
   overflow-y: auto;
 `;
 
+export const scrollableClass = css(scrollable);
+
+export const Form = styled.form<{ isParentScrollable: boolean }>`
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  ${(props) => props.isParentScrollable && scrollable};
+`;
+
 export const BodyHolder = styled.div<{ isParentScrollable: boolean }>`
   display: flex;
   flex-direction: column;

diff --git a/libs/design-system/src/sidebar/Sidebar.tsx b/libs/design-system/src/sidebar/Sidebar.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { Drawer, Loader, Stack } from '@mantine/core';
 import { useKeyDown } from '@novu/shared-web';
 
@@ -7,18 +6,9 @@ import { colors } from '../config';
 import { ArrowLeft } from '../icons';
 import { When } from '../when';
 import { Close } from './Close';
-import { BodyHolder, FooterHolder, HeaderHolder, scrollable, useDrawerStyles } from './Sidebar.styles';
+import { BodyHolder, FooterHolder, HeaderHolder, Form, useDrawerStyles } from './Sidebar.styles';
 import { ISidebarBaseProps } from './Sidebar.types';
 
-const Form = styled.form<{ isParentScrollable: boolean }>`
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  ${(props) => props.isParentScrollable && scrollable};
-`;
-
 export interface ISidebarProps extends ISidebarBaseProps {
   onSubmit?: React.FormEventHandler<HTMLFormElement>;
 }

diff --git a/libs/design-system/src/sidebar/SidebarFormless.tsx b/libs/design-system/src/sidebar/SidebarFormless.tsx
@@ -10,7 +10,7 @@ import {
   BodyHolder,
   FooterHolder,
   HeaderHolder,
-  scrollable,
+  scrollableClass,
   sidebarDrawerContentClassName,
   useDrawerStyles,
 } from './Sidebar.styles';
@@ -62,7 +62,7 @@ export const SidebarFormless = ({
     >
       <div
         data-test-id={dataTestId}
-        className={cx(sidebarDrawerContentClassName, { [scrollable]: isParentScrollable })}
+        className={cx(sidebarDrawerContentClassName, { [scrollableClass]: isParentScrollable })}
       >
         <HeaderHolder className="sidebar-header-holder">
           {isExpanded && onBack && (