Make scenario name input resize to fit content

application/frontend/src/app/core/components/dataset/dataset.component.html

@@ -1,10 +1,13 @@
 <div class="d-flex flex-row align-items-center ml-3">
   <mat-icon class="blue-svg-icon mb-1" svgIcon="dataset"></mat-icon>
-  <input
-    matInput
-    class="mat-h3 m-0 ml-1 scenario-input"
-    placeholder="Scenario name"
-    (input)="onSave()"
-    [(ngModel)]="scenarioName"
-    #scenarioInput />
+  <div class="resizable-input-container">
+    <span class="resize-text mat-h3 m-0" #resizeText>span</span>
+    <input
+      matInput
+      class="scenario-input mat-h3 m-0"
+      placeholder="Scenario name"
+      (input)="onSave()"
+      [(ngModel)]="scenarioName"
+      #scenarioInput />
+  </div>
 </div>

application/frontend/src/app/core/components/dataset/dataset.component.scss

@@ -1,8 +1,26 @@
 @import '../../../../styles/variables.scss';
 
-.scenario-input {
+.resizable-input-container {
+  display: inline-block;
+  position: relative;
   max-width: 50vw;
   min-width: 14em;
+  min-height: 3em;
+}
+
+.resize-text {
+  display: inline-block;
+  visibility: hidden;
+  white-space: pre;
+  padding: 0.25em 0.5em;
+}
+
+.scenario-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   border-width: 2px;
   border-style: inset;
   border-color: transparent;

application/frontend/src/app/core/components/dataset/dataset.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 import { Store } from '@ngrx/store';
 import { selectScenarioName } from '../../selectors/dispatcher.selectors';
 import { saveScenarioName } from '../../actions/dispatcher.actions';
@@ -9,18 +16,26 @@ import { saveScenarioName } from '../../actions/dispatcher.actions';
   styleUrls: ['./dataset.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatasetComponent implements OnInit {
+export class DatasetComponent implements AfterViewInit {
+  @ViewChild('scenarioInput') scenarioInput: ElementRef;
+  @ViewChild('resizeText') resizeText: ElementRef;
   scenarioName: string;
 
   constructor(private store: Store, private detectRef: ChangeDetectorRef) {}
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
     this.store.select(selectScenarioName).subscribe((value) => {
       this.scenarioName = value;
+      this.updateInputSize();
       this.detectRef.markForCheck();
     });
   }
 
+  updateInputSize(): void {
+    // this.scenarioInput.nativeElement.size = this.scenarioName.length || 1;
+    this.resizeText.nativeElement.textContent = this.scenarioName;
+  }
+
   onSave(): void {
     this.store.dispatch(saveScenarioName({ scenarioName: this.scenarioName }));
   }