Fix capitalisation and punctuation in report

public/js/hit.js

@@ -99,19 +99,19 @@ export default class extends Component {
     }
 
     headerJSX() {
-        var meta = `length: ${this.hitLength().toLocaleString()}`;
+        var meta = `Length: ${this.hitLength().toLocaleString()}`;
 
         if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Multiper queries, multiple hits
-            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}, ` + meta;
+            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}. ${meta}`;
         }
         else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {
             // Multiple queries, single hit
-            meta = `the only hit of query ${this.props.query.number}, ` + meta;
+            meta = `the only hit of query ${this.props.query.number}. ${meta}`;
         }
         else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Single query, multiple hits
-            meta = `hit ${this.props.hit.number}, ` + meta;
+            meta = `hit ${this.props.hit.number}. ${meta}`;
         }
 
         return <div className="section-header border-b border-seqorange flex flex-col sm:flex-row sm:justify-between w-full">
@@ -122,7 +122,7 @@ export default class extends Component {
                 </div>
                 <span className="ml-1">{this.props.hit.title}</span>
             </h4>
-            <span className="label text-sm font-normal text-inherit cursor-text">{meta}</span>
+            <span className="label first-letter:capitalize text-sm font-normal text-inherit cursor-text">{meta}</span>
         </div>;
     }
 

public/js/query.js

@@ -45,16 +45,17 @@ export class ReportQuery extends Component {
         return this.props.query.hits.length;
     }
     headerJSX() {
-        var meta = `length: ${this.queryLength().toLocaleString()}`;
+        var meta = `Length: ${this.queryLength().toLocaleString()}`;
+
         if (this.props.showQueryCrumbs) {
-            meta = `query ${this.props.query.number}, ` + meta;
+            meta = `query ${this.props.query.number}. ${meta}`;
         }
         return <div className="section-header border-b border-seqorange justify-between w-full flex flex-col sm:flex-row gap-4">
             <h3 className="text-base cursor-pointer flex flex-col sm:flex-row items-start">
                 <strong>Query=<span className="ml-1">{this.props.query.id}</span></strong>
                 <span className="ml-1">{this.props.query.title}</span>
             </h3>
-            <span className="label text-sm text-right font-normal text-inherit pt-0 px-0">{meta}</span>
+            <span className="label first-letter:capitalize text-sm text-right font-normal text-inherit pt-0 px-0">{meta}</span>
         </div>;
     }