How to change height and width in mat-form-field

Question

I’ve been using Angular for a whil to ve now, but still feel like a beginner with all there to it.im upgarding the project from v8 to v15 . now i having a problrm with angular material v15. the mat-form-field style got ruind picture of the diffrence in size

i want to change then to the smal size of clinet input like in the picture .

this the part of my html :

 <form *ngIf="!addFromClient" class="form-horizontal" [formGroup]="form">

            <div class="form-group row" style="margin-top: 10px; ">

                <div class="col-xl-3 col-md-6">

                    <div style="text-align:center;">

                        <div style="text-align:center;margin-top: 10px;">

                            <input class="form-control" list="Client" placeholder="{{'Client'}}"

                                formControlName="clientId">

                            <datalist id="Client">

                                <option *ngFor="let item of ClientList" [value]="item.raisonSociale">{{

                                    item.raisonSociale }} </option>

                            </datalist>

                        </div>

                    </div>

                </div>

                <div class="col-xl-3 col-md-6">

                    <div style="text-align:center;">

                        <mat-form-field appearance="outline">

                            <mat-label>Date activation carte</mat-label>

                            <input matInput formControlName="dateActivation" type="date">

                        </mat-form-field>

                    </div>

                </div>

                <div class="col-xl-3 col-md-6"> 
                    <mat-form-field appearance="outline"> 
                          <mat-label>Date création carte</mat-label> 
                           <input matInput formControlName="dateCreation" type="date"> 
                       </mat-form-field> 
                  </div> 

                <div class="col-xl-3 col-md-6">

                    <div style="text-align:center;">

                        <mat-form-field appearance="outline">

                            <mat-label>Type carte</mat-label>

                            <mat-select formControlName="TypeCarte">

                                <mat-option> Tous </mat-option>

                                <mat-option value="prépayé"> Prépayé </mat-option>

                                <mat-option value="postpayé"> Postpayé </mat-option>

                            </mat-select>

                        </mat-form-field>

                    </div>

                </div>

                <div class="col-xl-3 col-md-6">

                    <div style="text-align:center;">

                        <mat-form-field appearance="outline">

                            <mat-label>Statut</mat-label>

                            <mat-select formControlName="statut">

                                <mat-option> Tous </mat-option>

                                <mat-option value="0"> Active </mat-option>

                                <mat-option value="1"> Inactive </mat-option>

                                <mat-option value="8"> Expiré </mat-option>

                                <mat-option value="10"> Remplacé </mat-option>

                                <mat-option value="11"> Mise en opposition </mat-option>

                                <mat-option value="7"> Bloqué </mat-option>

                            </mat-select>

                        </mat-form-field>

                    </div>

                </div>



                <!-- <div class="col-xl-3 col-md-6">

                    <mat-form-field appearance="outline">

                        <mat-label>Date Fin</mat-label>

                        <input matInput formControlName="dateFin" type="date">

                        <mat-error>la Date fin doit être supérieur ou égale à la date début </mat-error>

                    </mat-form-field>

                </div> -->



                <div class="col-md-12 text-right">

                    <button class="btn btn-primary btn-ladda" data-style="expand-left" (click)="getListCarte()">

                        <i class="fa fa-search"> Chercher </i>

                    </button>

                </div>

            </div>

        </form>

this is my style.scss :

    /*!
 * CoreUI Pro - Bootstrap 4 Admin Template
 * @version v1.0.8
 * @link http://coreui.io/pro/
 * Copyright (c) 2018 creativeLabs Łukasz Holeczek
 * @license http://coreui.io/pro/license/
 */

// Override Boostrap variables
@import "bootstrap-variables";

// Import Bootstrap source files
@import "node_modules/bootstrap/scss/bootstrap";

// Override core variables
@import "core-variables";

// Import core styles
@import "core/core";

// Import UI Kits
@import "uikits/uikits";

// Custom styles
@import "custom";

// @import "datatable";

.mat-form-field {
    display: block !important;

}
.dropdown-btn{
    min-height: 50px !important;
}
.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: white !important; 
}

.mat-form-field-infix{
    width: auto !important;
}
.cdk-global-overlay-wrapper, .cdk-overlay-container {
    z-index: 99999 !important;
 }

the style used to befine in the older version, i tried many times to change it but to no success, I'm wondering if anyone has a SCSS override code that will override the rules back to the original shape or any other suggestions

thank you