fix: fixed height issue

fix: clicking on notification redirecting to correct URL

src/Notifications/NotificationRowItem.jsx

@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Icon } from '@edx/paragon';
-import { Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 import { getIconByType } from './utils';
 import { markNotificationsAsRead } from './data/thunks';
@@ -24,12 +23,13 @@ const NotificationRowItem = ({
   const { icon: iconComponent, class: iconClass } = getIconByType(type);
 
   return (
-    <Link
+    <a
       target="_blank"
       className="d-flex mb-2 align-items-center text-decoration-none"
-      to={contentUrl}
+      href={contentUrl}
       onClick={handleMarkAsRead}
       data-testid={`notification-${id}`}
+      rel="noopener noreferrer"
     >
       <Icon
         src={iconComponent}
@@ -62,7 +62,7 @@ const NotificationRowItem = ({
           )}
         </div>
       </div>
-    </Link>
+    </a>
   );
 };
 

src/Notifications/NotificationSections.jsx

@@ -60,7 +60,7 @@ const NotificationSections = () => {
             type={notification.type}
             contentUrl={notification.contentUrl}
             content={notification.content}
-            courseName={notification.courseName}
+            courseName={notification.contentContext?.courseName || ''}
             createdAt={notification.createdAt}
             lastRead={notification.lastRead}
           />

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);