From 17eee9dd59668f804532d04a38bb728b9748e68f Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Tue, 10 Oct 2023 13:42:07 +0500
Subject: [PATCH] fix: notification tray height issues (#479)

* fix: notification tray height issues

* refactor: fixed review issues of height

---------

Co-authored-by: SundasNoreen <sundas.noreen@arbisoft.com>
---
 src/Notifications/index.jsx | 34 ++++++++++------------------------
 src/index.scss              |  7 +++++++
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx
index 76d2badc..85207e70 100644
--- a/src/Notifications/index.jsx
+++ b/src/Notifications/index.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {
-  useCallback, useEffect, useRef, useState, useMemo,
+  useCallback, useEffect, useRef, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -24,6 +24,7 @@ const Notifications = () => {
   const popoverRef = useRef(null);
   const buttonRef = useRef(null);
   const [enableNotificationTray, setEnableNotificationTray] = useState(false);
+  const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const notificationCounts = useSelector(selectNotificationTabsCount);
   const isOnMediumScreen = useIsOnMediumScreen();
   const isOnLargeScreen = useIsOnLargeScreen();
@@ -41,10 +42,16 @@ const Notifications = () => {
   }, []);
 
   useEffect(() => {
+    const handleScroll = () => {
+      setIsHeaderVisible(window.scrollY < 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
     document.addEventListener('mousedown', handleClickOutsideNotificationTray);
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
+      window.removeEventListener('scroll', handleScroll);
       dispatch(resetNotificationState());
     };
   }, []);
@@ -188,28 +195,6 @@ const Notifications = () => {
     };
   }, []);
 
-  const viewPortHeight = document.body.clientHeight;
-  const headerHeight = document.getElementsByClassName('learning-header-container');
-  const footer = document.getElementsByClassName('footer');
-
-  const notificationBarHeight = useMemo(() => {
-    if (headerHeight.length > 0) {
-      const availableViewportHeight = viewPortHeight - headerHeight[0].clientHeight;
-
-      if (footer.length > 0) {
-        const footerRect = footer[0].getBoundingClientRect();
-        const visibleFooterHeight = Math.min(footerRect.bottom, window.innerHeight) - Math.max(footerRect.top, 0);
-        const footerHeight = footer[0].clientHeight;
-
-        const adjustedBarHeight = availableViewportHeight - footerHeight + Math.min(visibleFooterHeight, 0);
-
-        return adjustedBarHeight;
-      }
-      return availableViewportHeight;
-    }
-    return 0;
-  }, [viewPortHeight, headerHeight, footer]);
-
   const enableFeedback = useCallback(() => {
     window.usabilla_live('click');
   }, []);
@@ -225,12 +210,13 @@ const Notifications = () => {
         overlay={(
           <Popover
             id="notificationTray"
-            style={{ height: `${notificationBarHeight}px` }}
+            style={{ height: isHeaderVisible ? '91vh' : '100vh' }}
             data-testid="notification-tray"
             className={classNames('overflow-auto rounded-0 border-0 position-fixed', {
               'w-100': !isOnMediumScreen && !isOnLargeScreen,
               'medium-screen': isOnMediumScreen,
               'large-screen': isOnLargeScreen,
+              'popover-margin-top': !isHeaderVisible,
             })}
           >
             <div ref={popoverRef}>
diff --git a/src/index.scss b/src/index.scss
index d07ae468..1e2cc0fd 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -263,6 +263,8 @@ $white: #fff;
 .popover {
   filter: none;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+  margin-left: 5px !important;
+  margin-top: 7px !important;
 
   .popover-header{
     top: 0px;
@@ -337,3 +339,8 @@ $white: #fff;
     top: 50% !important;
   }
 }
+
+
+.popover-margin-top {
+  margin-top: -68px !important;
+}