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