UI: fixed contact based form city, state, Zip fields validation errors overlap on smaller screens

ui-ngx/src/app/shared/components/contact.component.html

@@ -21,26 +21,29 @@
     (selectCountryCode)="changeCountry($event)">
   </tb-country-autocomplete>
   <div class="tb-form-row column-xs tb-standard-fields no-border no-padding">
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" subscriptSizing="dynamic">
       <mat-label translate>contact.city</mat-label>
       <input matInput formControlName="city">
       <mat-error *ngIf="parentForm.get('city').hasError('maxlength')">
         {{ 'contact.city-max-length' | translate }}
       </mat-error>
+      <mat-hint></mat-hint>
     </mat-form-field>
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" subscriptSizing="dynamic">
       <mat-label translate>contact.state</mat-label>
       <input matInput formControlName="state">
       <mat-error *ngIf="parentForm.get('state').hasError('maxlength')">
         {{ 'contact.state-max-length' | translate }}
       </mat-error>
+      <mat-hint></mat-hint>
     </mat-form-field>
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" subscriptSizing="dynamic">
       <mat-label translate>contact.postal-code</mat-label>
       <input matInput formControlName="zip">
       <mat-error *ngIf="parentForm.get('zip').hasError('pattern')">
         {{ 'contact.postal-code-invalid' | translate }}
       </mat-error>
+      <mat-hint></mat-hint>
     </mat-form-field>
   </div>
   <mat-form-field class="mat-block">