Fix search bar styling (#23396)

home-assistant · Dec 23, 2024 · 061b6af · 061b6af
1 parent fd95ab5
commit 061b6af
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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;