From 6011fee18e4625213636ba2a01d5b90ab0567b8d Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Mon, 1 Sep 2025 15:32:11 +0100 Subject: [PATCH 1/9] app-bars: apply safe-area insets (top padding and fixed-adjust; add content padding in fixed) --- src/components/ha-top-app-bar-fixed.ts | 7 ++++++- src/components/ha-top-app-bar.ts | 6 +++++- src/components/ha-two-pane-top-app-bar-fixed.ts | 6 +++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index 7915d48fb070..10dc0ad082b6 100644 --- a/src/components/ha-top-app-bar-fixed.ts +++ b/src/components/ha-top-app-bar-fixed.ts @@ -8,12 +8,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase { static override styles = [ styles, css` + header { + padding-top: var(--safe-area-inset-top); + } .mdc-top-app-bar__row { height: var(--header-height); + padding-left: var(--safe-area-content-inset-left); + padding-right: var(--safe-area-content-inset-right); border-bottom: var(--app-header-border-bottom); } .mdc-top-app-bar--fixed-adjust { - padding-top: var(--header-height); + padding-top: calc(var(--safe-area-inset-top) + var(--header-height)); } .mdc-top-app-bar { --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal); diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts index 698cc4e84332..8e93a47ffd82 100644 --- a/src/components/ha-top-app-bar.ts +++ b/src/components/ha-top-app-bar.ts @@ -8,12 +8,16 @@ export class HaTopAppBar extends TopAppBarBase { static override styles = [ styles, css` + header { + padding-top: var(--safe-area-inset-top); + /* TODO right padding */ + } .mdc-top-app-bar__row { height: var(--header-height); border-bottom: var(--app-header-border-bottom); } .mdc-top-app-bar--fixed-adjust { - padding-top: var(--header-height); + padding-top: calc(var(--safe-area-inset-top) + var(--header-height)); } .mdc-top-app-bar { --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal); diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index 7dc65768c69e..eb4da13a5f36 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/src/components/ha-two-pane-top-app-bar-fixed.ts @@ -244,12 +244,16 @@ export class TopAppBarBaseBase extends BaseElement { styles, haStyleScrollbar, css` + header { + padding-top: var(--safe-area-inset-top); + /* TODO rigth padding */ + } .mdc-top-app-bar__row { height: var(--header-height); border-bottom: var(--app-header-border-bottom); } .mdc-top-app-bar--fixed-adjust { - padding-top: var(--header-height); + padding-top: calc(var(--safe-area-inset-top) + var(--header-height)); } .shadow-container { position: absolute; From b551b9dd6776bc3cc715ec304371477a4bf7aea6 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 14:42:05 +0100 Subject: [PATCH 2/9] Set toolbar --- src/layouts/hass-tabs-subpage.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index cec64a993550..b9fe16529048 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -240,7 +240,10 @@ class HassTabsSubpage extends LitElement { .toolbar { font-size: var(--ha-font-size-xl); - height: var(--header-height); + height: calc(var(--header-height) + var(--safe-area-inset-top)); + padding-top: var(--safe-area-inset-top); + padding-right: var(--safe-area-inset-right); + padding-left: var(--safe-area-content-inset-left); background-color: var(--sidebar-background-color); font-weight: var(--ha-font-weight-normal); border-bottom: 1px solid var(--divider-color); From 0ea5610c4118f6af55d7618150ec02885663877d Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 15:51:38 +0100 Subject: [PATCH 3/9] Set bars --- src/components/ha-top-app-bar-fixed.ts | 3 +++ src/components/ha-top-app-bar.ts | 7 +++---- src/components/ha-two-pane-top-app-bar-fixed.ts | 3 +++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts index 10dc0ad082b6..c7b87002ccfe 100644 --- a/src/components/ha-top-app-bar-fixed.ts +++ b/src/components/ha-top-app-bar-fixed.ts @@ -27,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase { --app-header-background-color, var(--mdc-theme-primary) ); + padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); } .mdc-top-app-bar__title { font-size: var(--ha-font-size-xl); diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts index 8e93a47ffd82..e53b3c805501 100644 --- a/src/components/ha-top-app-bar.ts +++ b/src/components/ha-top-app-bar.ts @@ -8,10 +8,6 @@ export class HaTopAppBar extends TopAppBarBase { static override styles = [ styles, css` - header { - padding-top: var(--safe-area-inset-top); - /* TODO right padding */ - } .mdc-top-app-bar__row { height: var(--header-height); border-bottom: var(--app-header-border-bottom); @@ -26,6 +22,9 @@ export class HaTopAppBar extends TopAppBarBase { --app-header-background-color, var(--mdc-theme-primary) ); + padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); } `, ]; diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index eb4da13a5f36..47f55dcf0f15 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/src/components/ha-two-pane-top-app-bar-fixed.ts @@ -278,6 +278,9 @@ export class TopAppBarBaseBase extends BaseElement { --app-header-background-color, var(--mdc-theme-primary) ); + padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); } .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled { box-shadow: none; From f6d97b6ada1ef8ecfb1b1065ed31fe22bb4e56ba Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 15:56:23 +0100 Subject: [PATCH 4/9] Add left and right insets to root ll --- src/panels/lovelace/hui-root.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 6dfe169cd544..cd182df6485c 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1213,6 +1213,8 @@ class HUIRoot extends LitElement { -webkit-backdrop-filter: var(--app-header-backdrop-filter, none); backdrop-filter: var(--app-header-backdrop-filter, none); padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); z-index: 4; transition: box-shadow 200ms linear; } @@ -1398,7 +1400,7 @@ class HUIRoot extends LitElement { padding-top: calc( var(--header-height, 56px) + calc(var(--tab-bar-height, 56px) - 2px) + - var(--safe-area-inset-top) + var(--safe-area-inset-top, 0px) ); } .hide-tab { From ab04f76135ac940577835f8ceab43d86529a9f41 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 15:56:28 +0100 Subject: [PATCH 5/9] Add to dev tools header --- src/panels/developer-tools/ha-panel-developer-tools.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 6bf21123930f..b34c02dd0744 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -130,6 +130,8 @@ class PanelDeveloperTools extends LitElement { background-color: var(--app-header-background-color); width: var(--mdc-top-app-bar-width, 100%); padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); color: var(--app-header-text-color, white); border-bottom: var(--app-header-border-bottom, none); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none); From f5d541ee250a93b501acc9f8c03596614a125d44 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 15:58:27 +0100 Subject: [PATCH 6/9] Fix --- src/layouts/hass-tabs-subpage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index b9fe16529048..aecc04e5d29e 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -243,7 +243,7 @@ class HassTabsSubpage extends LitElement { height: calc(var(--header-height) + var(--safe-area-inset-top)); padding-top: var(--safe-area-inset-top); padding-right: var(--safe-area-inset-right); - padding-left: var(--safe-area-content-inset-left); + padding-left: var(--safe-area-inset-left); background-color: var(--sidebar-background-color); font-weight: var(--ha-font-weight-normal); border-bottom: 1px solid var(--divider-color); From 1fabfffc5da18bb041879b06e3153ce8b32fb63b Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 2 Sep 2025 16:27:18 +0100 Subject: [PATCH 7/9] Apply to subpages (config pages mainly) --- src/layouts/hass-subpage.ts | 65 ++++++++++++++++++++++--------------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 11be4952a6a9..347a7e100f84 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -29,31 +29,35 @@ class HassSubpage extends LitElement { protected render(): TemplateResult { return html`
- ${this.mainPage || history.state?.root - ? html` - - ` - : this.backPath +
+ ${this.mainPage || history.state?.root ? html` - + + ` + : this.backPath + ? html` + + + + ` + : html` - - ` - : html` - - `} + `} -
${this.header}
- +
+ ${this.header} +
+ +
@@ -95,23 +99,28 @@ class HassSubpage extends LitElement { } .toolbar { + padding-top: var(--safe-area-inset-top); + padding-right: var(--safe-area-inset-right); + padding-left: var(--safe-area-inset-left); + background-color: var(--app-header-background-color); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + } + + .toolbar-content { display: flex; align-items: center; font-size: var(--ha-font-size-xl); - height: var(--header-height); padding: 8px 12px; - background-color: var(--app-header-background-color); font-weight: var(--ha-font-weight-normal); color: var(--app-header-text-color, white); - border-bottom: var(--app-header-border-bottom, none); - box-sizing: border-box; } @media (max-width: 599px) { - .toolbar { + .toolbar-content { padding: 4px; } } - .toolbar a { + .toolbar-content a { color: var(--sidebar-text-color); text-decoration: none; } @@ -140,7 +149,9 @@ class HassSubpage extends LitElement { .content { position: relative; width: 100%; - height: calc(100% - 1px - var(--header-height)); + height: calc( + 100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px) + ); overflow-y: auto; overflow: auto; -webkit-overflow-scrolling: touch; From c17a91b008e4b221aa8ec68dc2df2745b01323cc Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 3 Sep 2025 09:58:32 +0100 Subject: [PATCH 8/9] Adjust --- src/panels/lovelace/hui-root.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index cd182df6485c..1911282ae533 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1209,7 +1209,12 @@ class HUIRoot extends LitElement { border-bottom: var(--app-header-border-bottom, none); position: fixed; top: 0; - width: var(--mdc-top-app-bar-width, 100%); + width: var( + --mdc-top-app-bar-width, + calc( + 100% - var(--safe-area-inset-left) - var(--safe-area-inset-right) + ) + ); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none); backdrop-filter: var(--app-header-backdrop-filter, none); padding-top: var(--safe-area-inset-top); From 765d0ea4175652e0d8a697de00edb9e988342117 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Mon, 8 Sep 2025 11:34:27 +0100 Subject: [PATCH 9/9] Remove old comment --- src/components/ha-two-pane-top-app-bar-fixed.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index 47f55dcf0f15..c95cdcb2e24c 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/src/components/ha-two-pane-top-app-bar-fixed.ts @@ -246,7 +246,6 @@ export class TopAppBarBaseBase extends BaseElement { css` header { padding-top: var(--safe-area-inset-top); - /* TODO rigth padding */ } .mdc-top-app-bar__row { height: var(--header-height);