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

@@ -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;
       }

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;
     }
   `;

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%;

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;

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%;
+    }
   `;
 }