From 254317ed83ba4d82151bea6bb3966100db603138 Mon Sep 17 00:00:00 2001
From: Amy Chen <amysbubble@Amys-MacBook-Pro-3.local>
Date: Wed, 8 Nov 2023 10:49:45 -0800
Subject: [PATCH] fix scoring summary layout

---
 src/components/report/ScoringSummary.js | 18 ++++++++++--------
 src/styles/components/_Report.scss      |  6 +++++-
 src/styles/components/_Summary.scss     |  1 +
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/report/ScoringSummary.js b/src/components/report/ScoringSummary.js
index 84d5f1486..01110cce2 100644
--- a/src/components/report/ScoringSummary.js
+++ b/src/components/report/ScoringSummary.js
@@ -201,14 +201,16 @@ export default class ScoringSummary extends Component {
         (item) => item.ResponsesSummary && item.ResponsesSummary.length > 0
       ).length === 0;
     return (
-      <table className="table">
-        <caption>{this.getTitleDisplay()}</caption>
-        {!noSummaryData && this.renderTableHeaders()}
-        <tbody>
-          {noSummaryData && this.renderNoDataRow()}
-          {!noSummaryData && this.renderDataRows(summary, showAnchorLinks)}
-        </tbody>
-      </table>
+      <React.Fragment>
+        <div className="panel-title">{this.getTitleDisplay()}</div>
+        <table className="table">
+          {!noSummaryData && this.renderTableHeaders()}
+          <tbody>
+            {noSummaryData && this.renderNoDataRow()}
+            {!noSummaryData && this.renderDataRows(summary, showAnchorLinks)}
+          </tbody>
+        </table>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/styles/components/_Report.scss b/src/styles/components/_Report.scss
index 262ee69cc..b27cdefe3 100644
--- a/src/styles/components/_Report.scss
+++ b/src/styles/components/_Report.scss
@@ -400,6 +400,10 @@ $selector-box-shadow: 0 2px 2px #383e40;
         padding: 0;
         flex: 1 1;
       }
+      &-title {
+        font-size: 20px;
+        text-align: left;
+      }
       &__item {
         align-self: center;
         width: calc(100% - 16px);
@@ -415,7 +419,7 @@ $selector-box-shadow: 0 2px 2px #383e40;
         &.full-width {
           width: calc(100% - 16px);
         }
-        padding: 4px 8px 8px;
+        padding: 8px;
 
         .table {
           width: 100%;
diff --git a/src/styles/components/_Summary.scss b/src/styles/components/_Summary.scss
index 5bb65bf6b..b8bde6465 100644
--- a/src/styles/components/_Summary.scss
+++ b/src/styles/components/_Summary.scss
@@ -464,6 +464,7 @@
             font-weight: 700;
             margin-bottom: 8px;
             font-size: 20px;
+            text-align: left;
           }
           .title {
             font-weight: 700;