diff --git a/src/components/ha-bottom-sheet.ts b/src/components/ha-bottom-sheet.ts index 49914f6e7d..6c67d5aea5 100644 --- a/src/components/ha-bottom-sheet.ts +++ b/src/components/ha-bottom-sheet.ts @@ -232,7 +232,6 @@ export class HaBottomSheet extends LitElement { box-shadow: var(--wa-shadow-l); padding: 0; margin: 0; - top: auto; inset-inline-end: auto; bottom: 0; diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts index b3ff5af54e..f6badadc05 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts @@ -171,7 +171,6 @@ export default class HaAutomationSidebarCard extends LitElement { transition: box-shadow 180ms ease-in-out; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - z-index: 6; position: relative; background-color: var( --ha-dialog-surface-background, @@ -201,6 +200,7 @@ export default class HaAutomationSidebarCard extends LitElement { .card-content { max-height: calc(100% - 80px); overflow: auto; + margin-top: 0; } @media (min-width: 450px) and (min-height: 500px) { diff --git a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts index c750417574..a0c4cda870 100644 --- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts +++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts @@ -65,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement { } } } + // Reset testing state when condition changes + if (changedProperties.has("sidebarKey")) { + this._testing = false; + } } protected render() { @@ -283,20 +287,23 @@ export default class HaAutomationSidebarCondition extends LitElement { sidebar >` )} -
- ${this._testingResult - ? this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_pass" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.conditions.testing_error" - )} +
+
+ ${this._testingResult + ? this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_pass" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_error" + )} +
`; } @@ -396,21 +403,13 @@ export default class HaAutomationSidebarCondition extends LitElement { ha-automation-sidebar-card { position: relative; } - .testing { + .testing-wrapper { position: absolute; - z-index: 6; top: 0px; right: 0px; left: 0px; - text-transform: uppercase; - font-size: var(--ha-font-size-m); - font-weight: var(--ha-font-weight-bold); - background-color: var(--divider-color, #e0e0e0); - color: var(--text-primary-color); - max-height: 0px; + margin: -1px; overflow: hidden; - transition: max-height 0.3s; - text-align: center; border-top-right-radius: var( --ha-card-border-radius, var(--ha-border-radius-lg) @@ -419,15 +418,33 @@ export default class HaAutomationSidebarCondition extends LitElement { --ha-card-border-radius, var(--ha-border-radius-lg) ); + pointer-events: none; + height: 100px; + } + .testing { + --testing-color: var(--divider-color, #e0e0e0); + text-transform: uppercase; + font-size: var(--ha-font-size-m); + font-weight: var(--ha-font-weight-bold); + background-color: var(--testing-color); + color: var(--text-primary-color); + max-height: 0px; + transition: + max-height 0.3s ease-in-out, + padding-top 0.3s ease-in-out; + text-align: center; + } + .testing.active.narrow { + padding-top: 16px; } .testing.active { - max-height: 100px; + max-height: 100%; } .testing.error { - background-color: var(--accent-color); + --testing-color: var(--accent-color); } .testing.pass { - background-color: var(--success-color); + --testing-color: var(--success-color); } `, ]; diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts index 750224b440..a2a8a19bb6 100644 --- a/src/panels/config/automation/styles.ts +++ b/src/panels/config/automation/styles.ts @@ -217,7 +217,7 @@ export const automationRowsStyles = css` export const sidebarEditorStyles = css` .sidebar-editor { display: block; - padding-top: 16px; + padding-top: 8px; } .description { padding-top: 16px;