Angular 15 Material align text in input field to match select field

Question

In a search component, I have two mat-form-fields, one which is a select field, the other is a text input field.

When text is entered into both fields, the input text field's text is not aligned horizontally with the select field's text. This used to be aligned before we changed to the MDC components in our migration to Angular 15. How can I get the text of both fields to have the same horizontal alignment, or at least lower the text in the regular input fields so that it is closer to the select box text position?

<form novalidate [formGroup]="this.areaForm" class="eris-d-flex search-form" autocomplete="off" spellcheck="false">
<mat-form-field appearance="outline">
  <mat-label>Area</mat-label>
  <mat-select formControlName="area" id="areaInput">
      <mat-option *ngFor="let area of areas$ | async" [value]="area">
          {{area.Name}}
      </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
  <mat-label>Search Text</mat-label>
  <input formControlName="searchValue" id="searchValueInput" matInput placeholder="Search">
</mat-form-field>
<button [disabled]="!this.areaForm.valid" mat-raised-button color="primary" class="eris-ml-1 edaps-search-button"   (click)="this.getListData()">
  <mat-icon>search</mat-icon>
</button>
<button [disabled]="this.areaForm.get('searchValue')?.value?.length === 0" mat-raised-button class="eris-ml-1 edaps-search-button" type="reset" color="accent" (click)="clear()">
  <mat-icon>close</mat-icon>
</button>

Answer 1

I was able to solve this by adding some padding to the top of the input control. as an example:

.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
padding-top: 4px;}