From bbe03dc46f6d93bee9ff261fdf3cafafce646020 Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:53:12 +0500
Subject: [PATCH] fix: fixed overflow issue of stacked bar on mobile (#1425)

* fix: fixed overflow issue of stacked bar on mobile

* refactor: instead of ismobileview i used shouldDisplayFullScreen
---
 .../course/new-sidebar/SidebarContextProvider.jsx           | 6 +++---
 .../DiscussionsNotificationsSidebar.jsx                     | 2 +-
 .../discussions/DiscussionsWidget.jsx                       | 6 +++++-
 src/index.scss                                              | 4 ++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx b/src/courseware/course/new-sidebar/SidebarContextProvider.jsx
index b673c1a4..a87ed8ab 100644
--- a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx
+++ b/src/courseware/course/new-sidebar/SidebarContextProvider.jsx
@@ -75,11 +75,11 @@ const SidebarProvider = ({
   }, [currentSidebar, isDiscussionbarAvailable, isNotificationbarAvailable]);
 
   const clearSidebarKeyIfWidgetsUnavailable = useCallback((widgetId) => {
-    if ((!isNotificationbarAvailable && widgetId === WIDGETS.DISCUSSIONS)
-      || (!isDiscussionbarAvailable && widgetId === WIDGETS.NOTIFICATIONS)) {
+    if (((!isNotificationbarAvailable || hideNotificationbar) && widgetId === WIDGETS.DISCUSSIONS)
+      || ((!isDiscussionbarAvailable || hideDiscussionbar) && widgetId === WIDGETS.NOTIFICATIONS)) {
       setLocalStorage(sidebarKey, null);
     }
-  }, [isDiscussionbarAvailable, isNotificationbarAvailable]);
+  }, [isDiscussionbarAvailable, isNotificationbarAvailable, hideDiscussionbar, hideNotificationbar]);
 
   const toggleSidebar = useCallback((sidebarId = null, widgetId = null) => {
     if (widgetId) {
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx
index f1d87b2a..d98ffcec 100644
--- a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx
+++ b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx
@@ -17,7 +17,7 @@ const DiscussionsNotificationsSidebar = () => {
     <SidebarBase
       ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
       sidebarId={ID}
-      className="d-flex flex-column flex-fill"
+      className="d-flex flex-column flex-fill overflow-auto"
       showTitleBar={false}
       showBorder={false}
     >
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.jsx
index d2e9c0ee..453c053d 100644
--- a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.jsx
+++ b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.jsx
@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
+
 import SidebarContext from '../../../SidebarContext';
 import messages from '../../../messages';
 
@@ -24,7 +25,10 @@ const DiscussionsWidget = () => {
   return (
     <iframe
       src={`${discussionsUrl}?inContextSidebar`}
-      className={classNames('d-flex w-100 flex-fill border border-light-400 rounded-sm', { 'vh-100': !shouldDisplayFullScreen })}
+      className={classNames('d-flex w-100 flex-fill border border-light-400 rounded-sm', {
+        'vh-100': !shouldDisplayFullScreen,
+        'min-height-700': shouldDisplayFullScreen,
+      })}
       title={intl.formatMessage(messages.discussionsTitle)}
       allow="clipboard-write"
       loading="lazy"
diff --git a/src/index.scss b/src/index.scss
index d844d11b..5b66af78 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -430,6 +430,10 @@
   top: 0;
 }
 
+.min-height-700 {
+  min-height: 700px;
+}
+
 // Import component-specific sass files
 @import "courseware/course/celebration/CelebrationModal.scss";
 @import "courseware/course/sidebar/sidebars/discussions/Discussions.scss";