diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts index 0555d06388..015f572b21 100644 --- 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} ${this.expanded - ? html` + ? html` ${this.hass.localize("ui.panel.config.category.editor.add")} ` @@ -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 index 3213f22a6f..8ba3acd20a 100644 --- 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} ${this.expanded - ? html` + ? html` ${this.hass.localize("ui.panel.config.labels.add_label")} ` @@ -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; + } `, ]; }