angular mdc-select does not apply the full width

Question

I am trying to create a responsive form with some fields using Angular MDC, the problem is that the select field has a fixed size, unlike text fields that work responsively.

The html code is as follows

<div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-2-tablet mdc-layout-grid__cell--span-4-phone">
        <mdc-select formControlName="type" placeholder="Tipo de Cliente" outlined>
            <mdc-menu>
                <mdc-list>
                    <mdc-list-item *ngFor="let cliType of clientType" [value]="cliType">{{ cliType }}
                    </mdc-list-item>
                </mdc-list>
            </mdc-menu>
        </mdc-select>
        <mdc-select-helper-text *ngIf="submited && f['type'].errors" validation>
            <span *ngIf="f['type'].errors.required">{{
                erMessages.obricatoryField
            }}</span>
        </mdc-select-helper-text>
    </div>

The style is as follows

mdc-text-field,
mdc-select {
    width: 100%;
}

The result is as follows

enter image description here

I am runing on chrome 85.0.4183.121 64 bits. My Angular version is 9.1.9 and I am using angular-mdc/web 5.1.1

I already searched on google as well as in the framework documentation (https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/select/examples) but I didn't find anything that helps me to solve it