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;