Angular 11 - Mat-form-field mat-input in standard format, the line which is supposed to be on the bottom is coming in center until reloaded

Question

In the application where ever I had to use mat-form-field with mat-input it worked absolutely fine with outline appearance. There is a little distortion with standard appearance as the line that's supposed to be on the bottom of the span is coming the middle as in below image:

But once refreshed/reloaded it's back to how it's supposed to look.

I need the fields to look as in the second image always without having to reload every time. Please let me know if anyone knows how to fix this.

HTML:

<div class="d-flex w-100 flex-column justify-content-center align-items-center">
<form class="d-flex flex-column w-100 justify-content-center align-items-center m-2" [formGroup]="detailsFormGroup"
    #formDirective="ngForm">
    <mat-form-field class="m-1">
        <mat-label> Phone Number: </mat-label>
        <input [readonly]="exists" [formControl]="detailsFormGroup.get('phone')" [errorStateMatcher]="matcher" matInput maxlength="10"
            type="text">
        <mat-error *ngIf="detailsFormGroup.get('phone').errors?.required">
            Phone number is <strong>required</strong>
        </mat-error>
        <mat-error *ngIf="detailsFormGroup.get('phone').errors?.minlength">
            Phone number must have <strong>10 digits</strong>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="m-1 mt-2 pt-1">
        <mat-label> Name: </mat-label>
        <input [readonly]="exists" [formControl]="detailsFormGroup.get('name')" matInput [errorStateMatcher]="matcher" type="text">
        <mat-error *ngIf="detailsFormGroup.get('name').errors?.required">
            Name is <strong>required</strong>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="m-1">
        <mat-label>Email</mat-label>
        <input [readonly]="exists" type="email" matInput [formControl]="detailsFormGroup.get('email')" [errorStateMatcher]="matcher"
            placeholder="Ex. pat@example.com">
        <mat-error
            *ngIf="detailsFormGroup.get('email').hasError('email') && !detailsFormGroup.get('email').hasError('required')">
            Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="detailsFormGroup.get('email').hasError('required')">
            Email is <strong>required</strong>
        </mat-error>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Booking</mat-label>
        <mat-select [errorStateMatcher]="matcher" [formControl]="detailsFormGroup.get('consultation')">
            <mat-option value="consultation"> Consultation </mat-option>
            <mat-option value="medicines"> Medicines </mat-option>
        </mat-select>
        <mat-error *ngIf="detailsFormGroup.get('consultation').hasError('required')">
            Please select a time for appointment.
        </mat-error>
    </mat-form-field>
</form>