Merge pull request #372 from openedx/INF-685

fix: discussions navigation tab is not sticking to top

src/discussions/common/ActionsDropdown.jsx

@@ -52,37 +52,39 @@ function ActionsDropdown({
         size="sm"
         ref={setTarget}
       />
-      <ModalPopup
-        onClose={close}
-        positionRef={target}
-        isOpen={isOpen}
-        placement={inContext ? 'left' : 'auto-start'}
-      >
-        <div
-          className="bg-white p-1 shadow d-flex flex-column"
-          data-testid="actions-dropdown-modal-popup"
+      <div className="actions-dropdown">
+        <ModalPopup
+          onClose={close}
+          positionRef={target}
+          isOpen={isOpen}
+          placement={inContext ? 'left' : 'auto-start'}
         >
-          {actions.map(action => (
-            <React.Fragment key={action.id}>
-              {(action.action === ContentActions.DELETE)
+          <div
+            className="bg-white p-1 shadow d-flex flex-column"
+            data-testid="actions-dropdown-modal-popup"
+          >
+            {actions.map(action => (
+              <React.Fragment key={action.id}>
+                {(action.action === ContentActions.DELETE)
               && <Dropdown.Divider />}
 
-              <Dropdown.Item
-                as={Button}
-                variant="tertiary"
-                size="inline"
-                onClick={() => {
-                  close();
-                  handleActions(action.action);
-                }}
-                className="d-flex justify-content-start py-1.5 mr-4"
-              >
-                <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
-              </Dropdown.Item>
-            </React.Fragment>
-          ))}
-        </div>
-      </ModalPopup>
+                <Dropdown.Item
+                  as={Button}
+                  variant="tertiary"
+                  size="inline"
+                  onClick={() => {
+                    close();
+                    handleActions(action.action);
+                  }}
+                  className="d-flex justify-content-start py-1.5 mr-4"
+                >
+                  <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
+                </Dropdown.Item>
+              </React.Fragment>
+            ))}
+          </div>
+        </ModalPopup>
+      </div>
     </>
   );
 }

src/index.scss

@@ -118,7 +118,7 @@ $fa-font-path: "~font-awesome/fonts";
 
 header {
   .user-dropdown {
-    z-index: 2005;
+    z-index: 1;
   }
   .logo {
     margin-right: 1rem;
@@ -227,7 +227,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 2002;
+  z-index: 1;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -237,6 +237,10 @@ header {
   z-index: 1;
 }
 
+.actions-dropdown {
+  z-index: 0;
+}
+
 .discussion-topic-group:last-of-type .divider{
   display: none;
 }
@@ -249,6 +253,10 @@ header {
   z-index: 5000 !important;
 }
 
+#iconbutton-tooltip-top {
+  z-index: 0;
+}
+
 @media only screen and (max-width: 767px) {
   body:not(.tox-force-desktop) .tox .tox-dialog {
     align-self: center;