💄 align scenarios in rows

src/app/app.component.html

@@ -53,6 +53,7 @@
           </ng-container>
         </select>
         <scenario-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-year-graph>
+        <h3>Rural attractiveness factors</h3>
         <scenario-factor-year-graph [region]="selectedRegion" [domain]="selectedDomain"></scenario-factor-year-graph>
       </ng-template>
     </ng-container>

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -1,4 +1,3 @@
-<h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}} scenario comparison</h3>
 <div *ngIf="sdmDihService.yearsLoaded; else loading">
   <!--select
     class="form-select form-select-lg mb-3"
@@ -8,20 +7,31 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-  <h4>Baseline scenario</h4>
   <div class="d-flex">
+    <div class="discs-caption">
+      <h4>Baseline scenario</h4>
+      <p>
+        of region {{region}} in {{yearGraphService.selectedYear}}
+      </p>
+    </div>
     <div *ngFor="let factor of sdmDihService.factors">
       <disc [region]="region" [factor]="factor" show="factor" inSitu="true"></disc>
     </div>
   </div>
-
+  <hr>
   <div *ngFor="let scenario of filteredScenarios">
-    <h4>{{scenario}} scenario</h4>
     <div class="d-flex">
+      <div class="discs-caption">
+        <h4>{{scenario}} scenario</h4>
+        <p>
+          of region {{region}} in {{yearGraphService.selectedYear}}
+        </p>
+      </div>
       <div *ngFor="let factor of sdmDihService.factors">
         <disc [region]="region" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
       </div>
     </div>
+    <hr>
   </div>
 </div>
 <ng-template #loading> Loading data... </ng-template>

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.html

@@ -1,4 +1,3 @@
-<h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}} scenario comparison</h3>
 <div *ngIf="sdmDihService.yearsLoaded; else loading">
   <!--select
     class="form-select form-select-lg mb-3"
@@ -8,8 +7,13 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-  <h4>Aggregated RAI</h4>
   <div class="d-flex">
+    <div class="discs-caption">
+      <h4>Aggregated RAI</h4>
+      <p>
+        of region {{region}} in {{yearGraphService.selectedYear}}
+      </p>
+    </div>
     <disc [region]="region" show="scenario" inSitu="true"></disc>
     <div *ngFor="let scenario of filteredScenarios">
       <disc [region]="region" [scenario]="scenario" show="scenario" inSitu="true"></disc>

src/app/discs-chart/scenario-year-graph/scenario-year-graph.component.scss

@@ -20,3 +20,6 @@
   display: flex;
 }
 
+.discs-caption {
+  width: 100%;
+}