Fix add category and add label animation (#20272)

home-assistant · Mar 29, 2024 · e05595f · e05595f
1 parent 11cf2ec
commit e05595f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
@@ -144,7 +144,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           : nothing}
       </ha-expansion-panel>
       ${this.expanded
-        ? html`<ha-list-item graphic="icon" @click=${this._addCategory}>
+        ? html`<ha-list-item
+            graphic="icon"
+            @click=${this._addCategory}
+            class="add"
+          >
             <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.category.editor.add")}
           </ha-list-item>`
@@ -256,6 +260,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
       css`
         :host {
           border-bottom: 1px solid var(--divider-color);
+          position: relative;
         }
         :host([expanded]) {
           flex: 1;
@@ -293,6 +298,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         .warning {
           color: var(--error-color);
         }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
       `,
     ];
   }

diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
@@ -88,7 +88,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           : nothing}
       </ha-expansion-panel>
       ${this.expanded
-        ? html`<ha-list-item graphic="icon" @click=${this._addLabel}>
+        ? html`<ha-list-item
+            graphic="icon"
+            @click=${this._addLabel}
+            class="add"
+          >
             <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.labels.add_label")}
           </ha-list-item>`
@@ -149,6 +153,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
       haStyleScrollbar,
       css`
         :host {
+          position: relative;
           border-bottom: 1px solid var(--divider-color);
         }
         :host([expanded]) {
@@ -186,6 +191,12 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           --ha-label-background-color: var(--color, var(--grey-color));
           --ha-label-background-opacity: 0.5;
         }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
       `,
     ];
   }