From 1fc1106cef380c4bf376e20171bfa776ed069859 Mon Sep 17 00:00:00 2001
From: Karan Mistry <karan.mistry@siemens.com>
Date: Wed, 26 Mar 2025 16:41:32 +0530
Subject: [PATCH] fix(material/form-field): update text field styles for better
 alignment and overflow handling

Fixes #28743
---
 .../form-field/_mdc-text-field-structure-overrides.scss    | 5 ++++-
 src/material/form-field/_mdc-text-field-structure.scss     | 7 +++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/material/form-field/_mdc-text-field-structure-overrides.scss b/src/material/form-field/_mdc-text-field-structure-overrides.scss
index 772c1c0476fe..3ab2072519e4 100644
--- a/src/material/form-field/_mdc-text-field-structure-overrides.scss
+++ b/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);
       }
     }
diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss
index 3f00d56b11ab..c59916bc3896 100644
--- a/src/material/form-field/_mdc-text-field-structure.scss
+++ b/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,