From a78ddb50fdf0c073a768ddffe39c106654b31e1c Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:25:31 +0100
Subject: [PATCH] Fix time input with helper text width (#23134)

* Fix time input with helper text width

* Make time input help text always newline

* Put helper text out of base-time-input
---
 src/components/ha-base-time-input.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 91250e7add..7f8a9ddfc0 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -134,7 +134,7 @@ export class HaBaseTimeInput extends LitElement {
     return html`
       ${this.label
         ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
-        : ""}
+        : nothing}
       <div class="time-input-wrap-wrap">
         <div class="time-input-wrap">
           ${this.enableDay
@@ -158,7 +158,7 @@ export class HaBaseTimeInput extends LitElement {
                 >
                 </ha-textfield>
               `
-            : ""}
+            : nothing}
 
           <ha-textfield
             id="hour"
@@ -221,7 +221,7 @@ export class HaBaseTimeInput extends LitElement {
                 class=${this.enableMillisecond ? "has-suffix" : ""}
               >
               </ha-textfield>`
-            : ""}
+            : nothing}
           ${this.enableMillisecond
             ? html`<ha-textfield
                 id="millisec"
@@ -240,7 +240,7 @@ export class HaBaseTimeInput extends LitElement {
                 .disabled=${this.disabled}
               >
               </ha-textfield>`
-            : ""}
+            : nothing}
           ${this.clearable && !this.required && !this.disabled
             ? html`<ha-icon-button
                 label="clear"
@@ -251,7 +251,7 @@ export class HaBaseTimeInput extends LitElement {
         </div>
 
         ${this.format === 24
-          ? ""
+          ? nothing
           : html`<ha-select
               .required=${this.required}
               .value=${this.amPm}
@@ -265,10 +265,10 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="AM">AM</mwc-list-item>
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
-        ${this.helper
-          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-          : ""}
       </div>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : nothing}
     `;
   }
 
@@ -363,17 +363,17 @@ export class HaBaseTimeInput extends LitElement {
       width: 85px;
     }
     :host([clearable]) .mdc-select__anchor {
-        padding-inline-end: var(--select-selected-text-padding-end, 12px);
+      padding-inline-end: var(--select-selected-text-padding-end, 12px);
     }
     ha-icon-button {
-      position: relative
+      position: relative;
       --mdc-icon-button-size: 36px;
       --mdc-icon-size: 20px;
       color: var(--secondary-text-color);
       direction: var(--direction);
       display: flex;
       align-items: center;
-      background-color:var(--mdc-text-field-fill-color, whitesmoke);
+      background-color: var(--mdc-text-field-fill-color, whitesmoke);
       border-bottom-style: solid;
       border-bottom-width: 1px;
     }
@@ -398,6 +398,10 @@ export class HaBaseTimeInput extends LitElement {
       padding-inline-start: 4px;
       padding-inline-end: initial;
     }
+    ha-input-helper-text {
+      padding-top: 8px;
+      line-height: normal;
+    }
   `;
 }