Merge pull request #509 from MeasureAuthoringTool/MAT-6461

MAT-6461: QICore Horizontal Scroll in Highlighting
MeasureAuthoringTool · Dec 1, 2023 · 901e52b · 901e52b
2 parents 3dceb98 + efb9d4a
commit 901e52b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/editTestCase/groupCoverage/QiCoreGroupCoverage.scss b/src/components/editTestCase/groupCoverage/QiCoreGroupCoverage.scss
@@ -0,0 +1,5 @@
+#qi-core-coverage {
+  pre {
+    padding-bottom: 7px;
+  }
+}
diff --git a/src/components/editTestCase/groupCoverage/QiCoreGroupCoverage.tsx b/src/components/editTestCase/groupCoverage/QiCoreGroupCoverage.tsx
@@ -17,6 +17,7 @@ import {
   getFirstPopulation,
   getPopulationAbbreviation,
 } from "../../../util/GroupCoverageHelpers";
+import "./QiCoreGroupCoverage.scss";
 
 interface Props {
   groupPopulations: GroupPopulation[];
@@ -280,7 +281,7 @@ const QiCoreGroupCoverage = ({
           onChange={(e) => changeCriteria(e.target.value)}
         />
       </div>
-      <div tw="flex mt-5" key={selectedCriteria}>
+      <div tw="flex mt-5" key={selectedCriteria} id="qi-core-coverage">
         <div tw="flex-none w-1/5">
           <GroupCoverageNav
             id={selectedCriteria}
@@ -293,6 +294,7 @@ const QiCoreGroupCoverage = ({
 
         {!selectedAllDefinitions ? (
           <div
+            style={{ overflowX: "scroll" }}
             tw="flex-auto p-3"
             id={`${selectedHighlightingTab.abbreviation}-highlighting`}
             data-testid={`${selectedHighlightingTab.abbreviation}-highlighting`}
@@ -309,7 +311,7 @@ const QiCoreGroupCoverage = ({
             )}
           </div>
         ) : (
-          <div>
+          <div style={{ overflowX: "scroll" }}>
             {Object.values(selectedAllDefinitions)
               .filter((record) => !!record.statementLevelHTML)
               .map((record, index) => {