From 061b6af81217bf749209f9f88b011f11cd233fc0 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 23 Dec 2024 14:23:51 +0100
Subject: [PATCH] Fix search bar styling (#23396)

---
 src/components/ha-outlined-field.ts                       | 8 --------
 src/components/ha-outlined-text-field.ts                  | 5 +++--
 .../integrations/ha-config-integrations-dashboard.ts      | 7 ++++---
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/ha-outlined-field.ts b/src/components/ha-outlined-field.ts
index 88050e773440..694c9e538c5f 100644
--- a/src/components/ha-outlined-field.ts
+++ b/src/components/ha-outlined-field.ts
@@ -22,14 +22,6 @@ export class HaOutlinedField extends MdOutlinedField {
         border-end-start-radius: var(--_container-shape-end-start);
         border-end-end-radius: var(--_container-shape-end-end);
       }
-      .with-start .start {
-        margin-inline-end: var(--ha-outlined-field-start-margin, 4px);
-        margin-inline-start: initial;
-      }
-      .with-end .end {
-        margin-inline-start: var(--ha-outlined-field-end-margin, 4px);
-        margin-inline-end: initial;
-      }
     `,
   ];
 }
diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts
index 757478d0b322..026bce0b2579 100644
--- a/src/components/ha-outlined-text-field.ts
+++ b/src/components/ha-outlined-text-field.ts
@@ -28,8 +28,9 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
         --md-outlined-field-container-shape-end-end: 10px;
         --md-outlined-field-container-shape-end-start: 10px;
         --md-outlined-field-focus-outline-width: 1px;
-        --ha-outlined-field-start-margin: -4px;
-        --ha-outlined-field-end-margin: -4px;
+        --md-outlined-field-with-leading-content-leading-space: 8px;
+        --md-outlined-field-with-trailing-content-trailing-space: 8px;
+        --md-outlined-field-content-space: 8px;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
       .input {
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 3b7c36db92ec..ffd3a9471ff0 100644
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -436,9 +436,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
       >
         ${this.narrow
           ? html`
-              <div slot="header">
+              <div slot="header" class="header">
                 <search-input-outlined
-                  class="header"
                   .hass=${this.hass}
                   .filter=${this._filter}
                   @value-changed=${this._handleSearchChange}
@@ -457,7 +456,6 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
               ></ha-integration-overflow-menu>
               <div class="search">
                 <search-input-outlined
-                  class="header"
                   .hass=${this.hass}
                   .filter=${this._filter}
                   @value-changed=${this._handleSearchChange}
@@ -982,6 +980,9 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
         search-input-outlined {
           flex: 1;
         }
+        .header {
+          display: flex;
+        }
         .search {
           display: flex;
           justify-content: space-between;