From c66b4e20274ccfd80c97a8ae8f74bd0d4098be37 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 27 Jan 2026 21:32:43 +0100 Subject: [PATCH] Update top bar title margin on config and dashboard page (#29212) --- src/common/util/compute_rtl.ts | 4 ---- src/components/ha-top-app-bar-fixed.ts | 5 ++++- src/layouts/hass-subpage.ts | 8 ++++++-- src/layouts/hass-tabs-subpage.ts | 7 +++++-- src/panels/app/ha-panel-app.ts | 8 ++++++-- src/panels/climate/ha-panel-climate.ts | 10 +++++++--- src/panels/developer-tools/ha-panel-developer-tools.ts | 8 ++++++-- src/panels/light/ha-panel-light.ts | 8 ++++++-- src/panels/lovelace/hui-root.ts | 5 ++--- src/panels/security/ha-panel-security.ts | 8 ++++++-- 10 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts index b5bebfbc7d..723878e7ed 100644 --- a/src/common/util/compute_rtl.ts +++ b/src/common/util/compute_rtl.ts @@ -34,10 +34,6 @@ export function setDirectionStyles(direction: string, element: LitElement) { "--float-end", direction === "ltr" ? "right" : "left" ); - element.style.setProperty( - "--margin-title", - direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)" - ); element.style.setProperty( "--scale-direction", direction === "ltr" ? "1" : "-1" diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index 9cf9214e70..4481c42f54 100644 --- a/src/components/ha-top-app-bar-fixed.ts +++ b/src/components/ha-top-app-bar-fixed.ts @@ -42,9 +42,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase { } .mdc-top-app-bar__title { font-size: var(--ha-font-size-xl); - padding-inline-start: 24px; + padding-inline-start: var(--ha-space-6); padding-inline-end: initial; } + :host([narrow]) .mdc-top-app-bar__title { + padding-inline-start: var(--ha-space-2); + } `, ]; } diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index a7ac562877..d70abda6f4 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -1,6 +1,7 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, eventOptions, property } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { restoreScroll } from "../common/decorators/restore-scroll"; import { goBack } from "../common/navigate"; import "../components/ha-icon-button-arrow-prev"; @@ -27,7 +28,7 @@ class HassSubpage extends LitElement { protected render(): TemplateResult { return html` -
+
${this.mainPage || history.state?.root ? html` @@ -132,7 +133,7 @@ class HassSubpage extends LitElement { } .main-title { - margin: var(--margin-title); + margin-inline-start: var(--ha-space-6); line-height: var(--ha-line-height-normal); min-width: 0; flex-grow: 1; @@ -143,6 +144,9 @@ class HassSubpage extends LitElement { overflow: hidden; text-overflow: ellipsis; } + .narrow .main-title { + margin-inline-start: var(--ha-space-2); + } .content { position: relative; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 0951fedff2..9c6a913353 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -131,7 +131,7 @@ class HassTabsSubpage extends LitElement { ); const showTabs = tabs.length > 1; return html` -
+
${this.mainPage || (!this.backPath && history.state?.root) @@ -320,7 +320,10 @@ class HassTabsSubpage extends LitElement { max-height: var(--header-height); line-height: var(--ha-line-height-normal); color: var(--sidebar-text-color); - margin: var(--main-title-margin, var(--margin-title)); + margin-inline-start: var(--main-title-margin, var(--ha-space-6)); + } + .narrow .main-title { + margin-inline-start: var(--main-title-margin, var(--ha-space-2)); } .content { diff --git a/src/panels/app/ha-panel-app.ts b/src/panels/app/ha-panel-app.ts index 2410c24f70..6a1cd7a2fb 100644 --- a/src/panels/app/ha-panel-app.ts +++ b/src/panels/app/ha-panel-app.ts @@ -3,6 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { createRef, ref } from "lit/directives/ref"; import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import { navigate } from "../../common/navigate"; @@ -116,7 +117,7 @@ class HaPanelApp extends LitElement { ${!this._kioskMode && (this.narrow || this.hass.dockedSidebar === "always_hidden") ? html` -
+
+
${ this._searchParms.has("historyBack") @@ -225,10 +226,13 @@ class PanelClimate extends LitElement { padding: 0 4px; } .main-title { - margin: var(--margin-title); + margin-inline-start: var(--ha-space-6); line-height: var(--ha-line-height-normal); flex-grow: 1; } + .narrow .main-title { + margin-inline-start: var(--ha-space-2); + } hui-view-container { position: relative; display: flex; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index c80cb163c5..c248ed6864 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -2,6 +2,7 @@ import { mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { goBack, navigate } from "../../common/navigate"; import "../../components/ha-dropdown"; import "../../components/ha-dropdown-item"; @@ -30,7 +31,7 @@ class PanelDeveloperTools extends LitElement { protected render(): TemplateResult { const page = this._page; return html` -
+
+
${ this._searchParms.has("historyBack") @@ -225,10 +226,13 @@ class PanelLight extends LitElement { padding: 0 4px; } .main-title { - margin: var(--margin-title); + margin-inline-start: var(--ha-space-6); line-height: var(--ha-line-height-normal); flex-grow: 1; } + .narrow .main-title { + margin-inline-start: var(--ha-space-2); + } hui-view-container { position: relative; display: flex; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 5b9e035c70..1b74de0d78 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1364,7 +1364,7 @@ class HUIRoot extends LitElement { padding: 0 4px; } .main-title { - margin: var(--margin-title); + margin-inline-start: var(--ha-space-6); line-height: var(--ha-line-height-normal); flex-grow: 1; text-overflow: ellipsis; @@ -1373,8 +1373,7 @@ class HUIRoot extends LitElement { min-width: 0; } .narrow .main-title { - margin: 0; - margin-inline-start: 8px; + margin-inline-start: var(--ha-space-2); } .action-items { white-space: nowrap; diff --git a/src/panels/security/ha-panel-security.ts b/src/panels/security/ha-panel-security.ts index a9421083cf..0d071374ff 100644 --- a/src/panels/security/ha-panel-security.ts +++ b/src/panels/security/ha-panel-security.ts @@ -1,6 +1,7 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { goBack } from "../../common/navigate"; import { debounce } from "../../common/util/debounce"; import { deepEqual } from "../../common/util/deep-equal"; @@ -95,7 +96,7 @@ class PanelSecurity extends LitElement { protected render() { return html` -
+
${ this._searchParms.has("historyBack") @@ -225,10 +226,13 @@ class PanelSecurity extends LitElement { padding: 0 4px; } .main-title { - margin: var(--margin-title); + margin-inline-start: var(--ha-space-6); line-height: var(--ha-line-height-normal); flex-grow: 1; } + .narrow .main-title { + margin-inline-start: var(--ha-space-2); + } hui-view-container { position: relative; display: flex;