fix scoring summary layout

uwcirg · Nov 8, 2023 · 254317e · 254317e
1 parent 56e78c2
commit 254317e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -464,6 +464,7 @@
             font-weight: 700;
             margin-bottom: 8px;
             font-size: 20px;
+            text-align: left;
           }
           .title {
             font-weight: 700;