fix: fixed tabs scroll issue (#559)

Author: sundasnoreen12

src/Notifications/NotificationTabs.jsx

@@ -48,7 +48,7 @@ const NotificationTabs = () => {
               eventKey={appName}
               title={appName}
               notification={notificationUnseenCounts[appName]}
-              tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
+              tabClassName="pt-0 py-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
               data-testid={`notification-tab-${appName}`}
             >
               {selectedAppName === appName && <NotificationSections />}

src/Notifications/index.jsx

@@ -97,7 +97,7 @@ const Notifications = () => {
               <div ref={headerRef}>
                 <Popover.Title
                   as="h2"
-                  className={`d-flex justify-content-between p-4 m-0 border-0 text-primary-500 zIndex-2 font-size-18
+                  className={`d-flex justify-content-between px-4 pt-4 pb-14px m-0 border-0 text-primary-500 zIndex-2 font-size-18
                   line-height-24 bg-white position-sticky`}
                 >
                   {intl.formatMessage(messages.notificationTitle)}

src/Notifications/notification.scss

@@ -91,7 +91,7 @@
   }
 
   .tabs {
-    top: 72px;
+    top: 0px;
   }
 
   &.medium-screen {
@@ -103,7 +103,7 @@
   }
 
   &.popover-margin-top {
-    margin-top: -68px !important;
+    margin-top: -60px !important;
   }
 
   &.height-100vh {
@@ -214,12 +214,12 @@
   }
 
   .py-10px {
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
   }
 
-  .pb-10px {
-    padding-bottom: 10px;
+  .pb-14px {
+    padding-bottom: 14px !important;
   }
 
   .font-size-18 {