From 7ab0622bec9c667b26c6c87e9a3ee14f59672913 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Wed, 18 Feb 2026 17:05:41 +0300
Subject: [PATCH] cloud-tts-pref: fix for language picker (#29678)

* fix styles to prevent oveflow

* use a new variable to define min-width

* pass a "minWidth" property into ha-language-picker

* use a "minWidth" property for ha-generic-picker

* Update ha-language-picker.ts

* pass empty minWidth

* do not set min-width if empty

* add a style for ha-language-picker

* remove a style for ha-language-picker

* add a style for ha-language-picker

* remove min-width

* add a style for ha-language-picker

* Update src/panels/profile/ha-pick-language-row.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* add a gap

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
---
 landing-page/src/ha-landing-page.ts                |  3 +++
 src/components/ha-language-picker.ts               |  1 -
 src/components/media-player/ha-browse-media-tts.ts |  4 ++++
 src/panels/config/cloud/account/cloud-tts-pref.ts  | 11 +----------
 src/panels/profile/ha-pick-language-row.ts         |  3 +++
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts
index d7a6434e16..ecd0eaee0c 100644
--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -222,6 +222,9 @@ class HaLandingPage extends LandingPageBaseElement {
         flex-direction: column;
         gap: var(--ha-space-4);
       }
+      ha-language-picker {
+        min-width: 200px;
+      }
       ha-alert p {
         text-align: unset;
       }
diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts
index 8725121a15..5a81d1aff9 100644
--- a/src/components/ha-language-picker.ts
+++ b/src/components/ha-language-picker.ts
@@ -191,7 +191,6 @@ export class HaLanguagePicker extends LitElement {
   static styles = css`
     ha-generic-picker {
       width: 100%;
-      min-width: 200px;
       display: block;
     }
   `;
diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts
index e448f4f268..7af3a7c9a7 100644
--- a/src/components/media-player/ha-browse-media-tts.ts
+++ b/src/components/media-player/ha-browse-media-tts.ts
@@ -242,6 +242,10 @@ class BrowseMediaTTS extends LitElement {
         margin-top: 16px;
         display: flex;
         justify-content: space-between;
+        gap: var(--ha-space-2);
+      }
+      ha-language-picker {
+        width: 100%;
       }
       ha-textarea {
         width: 100%;
diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts
index fb54238f50..6149d5ae2a 100644
--- a/src/panels/config/cloud/account/cloud-tts-pref.ts
+++ b/src/panels/config/cloud/account/cloud-tts-pref.ts
@@ -228,21 +228,12 @@ export class CloudTTSPref extends LitElement {
     }
     .row {
       display: flex;
+      gap: var(--ha-space-2);
     }
     .row > * {
       flex: 1;
       width: 0;
     }
-    .row > *:first-child {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-    }
-    .row > *:last-child {
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: initial;
-    }
     .card-actions {
       display: flex;
       align-items: center;
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
index 09ccbb9a6f..57c7a53000 100644
--- a/src/panels/profile/ha-pick-language-row.ts
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -52,6 +52,9 @@ export class HaPickLanguageRow extends LitElement {
     a {
       color: var(--primary-color);
     }
+    ha-language-picker {
+      width: 100%;
+    }
   `;
 }