Use fixed layout for automation sidebar to have scrollbar on the side (#26751)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Paul Bottein
2025-08-29 14:19:13 +02:00
committed by GitHub
parent 0269540ee9
commit 1fd7c84583
7 changed files with 92 additions and 162 deletions

View File

@@ -22,7 +22,6 @@ import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-icon-button";
import "../../../components/ha-markdown";
import type { SidebarConfig } from "../../../data/automation";
@@ -199,8 +198,7 @@ export class HaManualScriptEditor extends LitElement {
return html`
<div
class=${classMap({
"split-view": true,
"sidebar-hidden": !this._sidebarConfig,
"has-sidebar": this._sidebarConfig && !this.narrow,
})}
>
<div class="content-wrapper">
@@ -208,31 +206,33 @@ export class HaManualScriptEditor extends LitElement {
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveScript}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
<div class="fab-positioner">
<div class="fab-positioner">
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveScript}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
</div>
</div>
</div>
<div class="sidebar-positioner">
<ha-automation-sidebar
tabindex="-1"
class=${classMap({ hidden: !this._sidebarConfig })}
.narrow=${this.narrow}
.isWide=${this.isWide}
.hass=${this.hass}
.config=${this._sidebarConfig}
@value-changed=${this._sidebarConfigChanged}
.disabled=${this.disabled}
></ha-automation-sidebar>
</div>
<ha-automation-sidebar
tabindex="-1"
class=${classMap({
sidebar: true,
overlay: !this.isWide,
rtl: computeRTL(this.hass),
})}
.narrow=${this.narrow}
.isWide=${this.isWide}
.hass=${this.hass}
.config=${this._sidebarConfig}
@value-changed=${this._sidebarConfigChanged}
.disabled=${this.disabled}
></ha-automation-sidebar>
</div>
`;
}