In Angular 15, how can I decrease the size of a Form Field?

I'm trying to reduce the size of a Form Field and font in Angular 15 as simply as possible. In the middle of an upgrade to 15 from 13 and the existing UI is quite broken.

HTML

<div class="example-container">
<mat-form-field appearance="outline">
<mat-label>Select me long text end with ellipse</mat-label>
<mat-select>
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>


CSS

mat-form-field {
width:150px;
}

.mat-mdc-text-field-wrapper {
height: 30px;
}


When I adjust the size with those selectors in Google Dev Tools, it works - but it didn't in Stackblitz. However, even if the size decreases, the mat-label text is out of the box and not centered. I've messed with the padding and a bunch of other things, but I can't get it to work.

Is there a simple solution to scale it down to a smaller size?

Image of what's going on

Continue reading...