From 91a5497c607997b1bc9f0e18eab7543d1e686c31 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:41:08 +0300
Subject: [PATCH] fix ha-textfield (max-width, text-overflow, padding) (#25043)

* fix max-width, text-overflow, padding

* simmetrical padding
---
 src/components/ha-textfield.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index 8ca3561ac8..4f2526098b 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -136,13 +136,12 @@ export class HaTextField extends TextFieldBase {
       }
 
       .mdc-floating-label:not(.mdc-floating-label--float-above) {
-        text-overflow: ellipsis;
-        width: inherit;
-        padding-right: 30px;
-        padding-inline-end: 30px;
-        padding-inline-start: initial;
-        box-sizing: border-box;
-        direction: var(--direction);
+        max-width: calc(100% - 16px);
+      }
+
+      .mdc-floating-label--float-above {
+        max-width: calc((100% - 16px) / 0.75);
+        transition: none;
       }
 
       input {
@@ -183,11 +182,15 @@ export class HaTextField extends TextFieldBase {
       }
 
       .mdc-floating-label {
+        padding-inline-end: 16px;
+        padding-inline-start: initial;
         inset-inline-start: 16px !important;
         inset-inline-end: initial !important;
         transform-origin: var(--float-start);
         direction: var(--direction);
         text-align: var(--float-start);
+        box-sizing: border-box;
+        text-overflow: ellipsis;
       }
 
       .mdc-text-field--with-leading-icon.mdc-text-field--filled