ROENROLL-1860 add variable credit dropdown underline

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html

@@ -80,18 +80,21 @@
         <ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
           <ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
             <div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">
-              <label>
+              <label id="credits-range-{{ course.id }}">
                 {{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
                 <br>
                 <small>{{ course.title }}</small>
               </label>
-              <mat-select formControlName="credits">
-                <mat-option
-                  *ngFor="let credit of course.range"
-                  [value]="credit">
-                  {{ credit }}
-                </mat-option>
-              </mat-select>
+              <mat-form-field>
+                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                  <mat-option
+                    *ngFor="let credit of course.range"
+                    [value]="credit">
+                    {{ credit }} cr
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </ng-container>
 

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss

@@ -34,9 +34,10 @@
     flex-grow: 1;
   }
 
-  mat-select {
-    width: 48px;
+  mat-form-field {
+    width: 72px;
     display: block;
     flex-grow: 0;
+    text-align: right;
   }
 }

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html

@@ -114,18 +114,21 @@
         <ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
           <ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
             <div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">
-              <label>
+              <label id="credits-range-{{ course.id }}">
                 {{ course.termCode | getTermDescription }}: {{ course | courseDescription }}
                 <br>
                 <small>{{ course.title }}</small>
               </label>
-              <mat-select formControlName="credits">
-                <mat-option
-                  *ngFor="let credit of course.range"
-                  [value]="credit">
-                  {{ credit }}
-                </mat-option>
-              </mat-select>
+              <mat-form-field>
+                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                  <mat-option
+                    *ngFor="let credit of course.range"
+                    [value]="credit">
+                    {{ credit }} cr
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </ng-container>
 

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss

@@ -34,9 +34,10 @@
     flex-grow: 1;
   }
 
-  mat-select {
-    width: 48px;
+  mat-form-field {
+    width: 72px;
     display: block;
     flex-grow: 0;
+    text-align: right;
   }
 }