fix(material/form-field): update text field styles for better alignment and overflow handling

Fixes #28743

Author: mistrykaran91

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -51,6 +51,7 @@ $_enable-form-field-will-change-reset: true;
   .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
     // Style the cursor the same way as the rest of the input
     cursor: inherit;
+    width: inherit;
   }
 
   // Reset the height that MDC sets on native input elements. We cannot rely on their
@@ -117,7 +118,9 @@ $_enable-form-field-will-change-reset: true;
   .mat-form-field-disabled .mdc-text-field__input {
     @include vendor-prefixes.input-placeholder {
       @include token-utils.use-tokens(
-        tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-token-slots()
+      ) {
         @include token-utils.create-token-slot(color, disabled-input-text-placeholder-color);
       }
     }

src/material/form-field/_mdc-text-field-structure.scss

@@ -233,7 +233,7 @@
     }
 
     .mdc-notched-outline & {
-      text-overflow: clip;
+      text-overflow: ellipsis;
     }
 
     .mdc-notched-outline--upgraded & {
@@ -398,6 +398,7 @@
     @include token-utils.use-tokens($outlined-slots...) {
       .mdc-text-field--outlined .mdc-notched-outline & {
         $shape-var: token-utils.get-token-variable(container-shape);
+        --mat-form-field-notch-max-width: 180px; // set width same as .mat-mdc-form-field-infix See form-field.scss
         max-width: min(
           var(--mat-form-field-notch-max-width, 100%),
           calc(100% - max(12px, #{$shape-var}) * 2)
@@ -611,7 +612,9 @@
   }
 
   .mdc-line-ripple::after {
-    transition: transform 180ms $timing-curve, opacity 180ms $timing-curve;
+    transition:
+      transform 180ms $timing-curve,
+      opacity 180ms $timing-curve;
   }
 
   .mat-mdc-form-field-hint-wrapper,