fix: fixed height issue

src/Notifications/index.jsx

@@ -44,6 +44,13 @@ const Notifications = () => {
     };
   }, []);
 
+  const viewPortHeight = window.innerHeight;
+  const headerHeight = document.getElementsByClassName('learning-header');
+  let notificationBarHeight = 0;
+  if (headerHeight.length > 0) {
+    notificationBarHeight = viewPortHeight - headerHeight[0].clientHeight;
+  }
+
   return (
     <OverlayTrigger
       trigger="click"
@@ -54,6 +61,7 @@ const Notifications = () => {
       overlay={(
         <Popover
           id="notificationTray"
+          style={{ height: `${notificationBarHeight}px` }}
           data-testid="notification-tray"
           className={classNames('overflow-auto rounded-0 border-0', {
             'w-100': !isOnMediumScreen && !isOnLargeScreen,

src/index.scss

@@ -190,8 +190,6 @@ $white: #fff;
 }
 
 .popover {
-  max-height: calc(100% - 68px);
-  min-height: 1220px;
   filter: none;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);