🐛 Address style issues on assessment summary / questionnaire view

client/public/locales/en/translation.json

@@ -323,6 +323,7 @@
  "email": "Email",
  "error": "Error",
  "errorReport": "Error report",
+ "explanation": "Explanation",
  "exclude": "Exclude",
  "exportToIssue": "Export to Issue Manager",
  "facts": "Facts",

client/src/app/components/questionnaire-summary/questionnaire-summary.tsx

@@ -166,6 +166,7 @@ const QuestionnaireSummary: React.FC<QuestionnaireSummaryProps> = ({
  isVertical
  aria-label="Tabs for summaryData sections"
  role="region"
+ className="tabs-vertical-container__tabs"
  >
  {[
  <Tab

client/src/app/components/questions-table/questions-table.tsx

@@ -178,11 +178,14 @@ const QuestionsTable: React.FC<{
  className={spacing.pyLg}
  >
  <ExpandableRowContent>
- {question.explanation}
- <AnswerTable
- hideAnswerKey={hideAnswerKey}
- answers={question.answers}
- />
+ <div className={spacing.mlMd}>
+ <strong>{t("terms.explanation")}: &nbsp;</strong>
+ <span>{question.explanation}</span>
+ <AnswerTable
+ hideAnswerKey={hideAnswerKey}
+ answers={question.answers}
+ />
+ </div>
  </ExpandableRowContent>
  </Td>
  </Tr>

client/src/app/pages/assessment-management/questionnaire/questionnaire-page.css

@@ -1,5 +1,10 @@
 .tabs-vertical-container {
  display: flex;
+ margin-top: 1.5em;
+}
+
+.tabs-vertical-container__tabs {
+ margin-top: 1.5em;
 }
 
 .tabs-vertical-container .pf-v5-c-tabs {

client/src/app/pages/assessment/components/assessment-summary/assessment-summary-page.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { useParams } from "react-router-dom";
-import "./assessment-summary-page.css";
 import QuestionnaireSummary, {
  SummaryType,
 } from "@app/components/questionnaire-summary/questionnaire-summary";