fix: Show researcher header outside progress dashboard view [PT-18732…

…5112]

The response details and feedback views use fixed elements under the header and have a top value set which was covering up the optional researcher header.

This also fixes the bottom 3px white border (defined using a bottom-margin) disappearing when the user switched out of the progress dashboard.

css/portal-dashboard/header.less

@@ -7,7 +7,7 @@
   align-items: center;
   box-sizing: border-box;
   height: @header-height;
-  margin-bottom: 3px;
+  margin-bottom: @header-margin-bottom;
   min-width: 1100px;
   padding: 0 20px;
   background-color: @cc-teal-light4;
@@ -270,8 +270,9 @@
 }
 
 .researcherHeader {
+  height: @researcher-header-height;
   background-color: #0592af;
-  padding: 5px 15px;
+  padding: @researcher-header-topbottom-padding 15px;
   color: white;
 }
 

css/portal-dashboard/portal-dashboard-app.less

@@ -26,7 +26,7 @@
 
   .responseDetails {
     position: fixed;
-    top: @header-height;
+    top: @header-total-height;
     bottom: 0;
     padding: 0;
     box-sizing: border-box;
@@ -38,6 +38,10 @@
     z-index: 1;
     display: flex;
     flex-direction: column;
+
+    &.isResearcher {
+      top: @header-total-height + @researcher-header-total-height;
+    }
   }
 
 }

css/portal-dashboard/variables.less

@@ -58,6 +58,13 @@
 @hi-green-light3: #d7ffcc;
 
 @header-height: 60px;
+@header-margin-bottom: 3px;
+@header-total-height: @header-height + @header-margin-bottom;
+
+@researcher-header-height: 19px;
+@researcher-header-topbottom-padding: 5px;
+@researcher-header-total-height: @researcher-header-height + (2 * @researcher-header-topbottom-padding);
+
 @top-nav-height: 245px;
 @top-nav-level-viewer-height: 205px;
 @top-margin: 8px;

js/containers/portal-dashboard/portal-dashboard-app.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { List, Map } from "immutable";
 import { connect } from "react-redux";
+import classNames from "classnames";
 import { fetchAndObserveData, trackEvent, setAnonymous, TrackEventFunction, TrackEventFunctionOptions, TrackEventCategory, setExtraEventLoggingParameters } from "../../actions/index";
 import { getSortedStudents, getCurrentActivity, getCurrentQuestion, getCurrentStudentId, getDashboardFeedbackSortBy,
          getStudentProgress, getCompactReport, getAnonymous, getDashboardSortBy, getHideFeedbackBadges, getIsResearcher
@@ -219,7 +220,7 @@ class PortalDashboardApp extends React.PureComponent<IProps, IState> {
                 trackEvent={trackEvent}
               />
             </div>
-            : <div className={css.responseDetails} data-cy="response-details-container">
+            : <div className={classNames(css.responseDetails, {[css.isResearcher]: isResearcher})} data-cy="response-details-container">
                 <ResponseDetails
                   activities={activityTrees}
                   anonymous={anonymous}