From cc70eb46c9123b4dce75b01988ce119346c61e25 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Tue, 9 Sep 2025 10:59:24 +0100 Subject: [PATCH] Safe area: sidebar and notification drawer (#26853) * sidebar: account for safe-area top inset in menu height/padding; adjust list height calc * Defaults * Defaults * Restore * Remove test * Adjust * Adjust * Only apply on smaller layouts * Fix * Restore * Restore * No default in this case * Restore * Gain back some space * Fix * Adjust * Tweak * Calculate when mobile * Use fallbacks for calculations and others anyway --- src/components/ha-header-bar.ts | 1 + src/components/ha-sidebar.ts | 28 ++++++++++------- .../notifications/notification-drawer.ts | 30 ++++++++++++++----- src/layouts/home-assistant-main.ts | 4 +-- 4 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts index d50d764af2..46c549b0ec 100644 --- a/src/components/ha-header-bar.ts +++ b/src/components/ha-header-bar.ts @@ -38,6 +38,7 @@ export class HaHeaderBar extends LitElement { .mdc-top-app-bar { position: static; color: var(--mdc-theme-on-primary, #fff); + padding: var(--header-bar-padding); } .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start { flex: 1; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index d097a57ce0..b651a5cbbb 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -666,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { tooltip.style.display = "block"; tooltip.style.position = "fixed"; tooltip.style.top = `${top}px`; - tooltip.style.left = `${item.offsetLeft + item.clientWidth + 8}px`; + tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`; } private _hideTooltip() { @@ -705,9 +705,10 @@ class HaSidebar extends SubscribeMixin(LitElement) { background-color: var(--sidebar-background-color); width: 100%; box-sizing: border-box; + padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px)); } .menu { - height: var(--header-height); + height: calc(var(--header-height) + var(--safe-area-inset-top, 0px)); box-sizing: border-box; display: flex; padding: 0 4px; @@ -725,12 +726,16 @@ class HaSidebar extends SubscribeMixin(LitElement) { ); font-size: var(--ha-font-size-xl); align-items: center; - padding-left: calc(4px + var(--safe-area-inset-left)); - padding-inline-start: calc(4px + var(--safe-area-inset-left)); + padding-left: calc(4px + var(--safe-area-inset-left, 0px)); + padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px)); padding-inline-end: initial; + padding-top: var(--safe-area-inset-top, 0px); } :host([expanded]) .menu { - width: calc(256px + var(--safe-area-inset-left)); + width: calc(256px + var(--safe-area-inset-left, 0px)); + } + :host([narrow][expanded]) .menu { + width: 100%; } .menu ha-icon-button { color: var(--sidebar-icon-color); @@ -756,22 +761,23 @@ class HaSidebar extends SubscribeMixin(LitElement) { ha-fade-in, ha-md-list { height: calc( - 100% - var(--header-height) - 132px - var(--safe-area-inset-bottom) + 100% - var(--header-height) - var(--safe-area-inset-top, 0px) - + 132px - var(--safe-area-inset-bottom, 0px) ); } ha-fade-in { + padding: 4px 0; + box-sizing: border-box; display: flex; justify-content: center; align-items: center; } ha-md-list { - padding: 4px 0; - box-sizing: border-box; overflow-x: hidden; background: none; - margin-left: var(--safe-area-inset-left); + margin-left: var(--safe-area-inset-left, 0px); } ha-md-list-item { @@ -791,7 +797,9 @@ class HaSidebar extends SubscribeMixin(LitElement) { } :host([expanded]) ha-md-list-item { width: 248px; - width: calc(248px - var(--safe-area-inset-left)); + } + :host([narrow][expanded]) ha-md-list-item { + width: calc(240px - var(--safe-area-inset-left, 0px)); } ha-md-list-item.selected { diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts index e7817c4103..4dc4d56a04 100644 --- a/src/dialogs/notifications/notification-drawer.ts +++ b/src/dialogs/notifications/notification-drawer.ts @@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement { ); this.style.setProperty( "--mdc-drawer-width", - narrow ? window.innerWidth + "px" : "500px" + `min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))` ); this._open = true; } @@ -152,24 +152,40 @@ export class HuiNotificationDrawer extends LitElement { ha-header-bar { --mdc-theme-on-primary: var(--primary-text-color); --mdc-theme-primary: var(--primary-background-color); + --header-bar-padding: var(--safe-area-inset-top, 0px) 0 0 + var(--safe-area-inset-left, 0px); border-bottom: 1px solid var(--divider-color); display: block; } + @media all and (max-width: 450px), all and (max-height: 500px) { + ha-header-bar { + --header-bar-padding: var(--safe-area-inset-top, 0px) + var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px); + } + } + .notifications { overflow-y: auto; padding-top: 16px; - padding-left: var(--safe-area-inset-left); - padding-right: var(--safe-area-inset-right); - padding-inline-start: var(--safe-area-inset-left); - padding-inline-end: var(--safe-area-inset-right); - padding-bottom: var(--safe-area-inset-bottom); - height: calc(100% - 1px - var(--header-height)); + padding-left: var(--safe-area-inset-left, 0px); + padding-inline-start: var(--safe-area-inset-left, 0px); + padding-bottom: var(--safe-area-inset-bottom, 0px); + height: calc( + 100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px) + ); box-sizing: border-box; background-color: var(--primary-background-color); color: var(--primary-text-color); } + @media all and (max-width: 450px), all and (max-height: 500px) { + .notifications { + padding-right: var(--safe-area-inset-right, 0px); + padding-inline-end: var(--safe-area-inset-right, 0px); + } + } + .notification { padding: 0 16px 16px; } diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index bb63275b84..0c7d60035f 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -144,13 +144,13 @@ export class HomeAssistantMain extends LitElement { color: var(--primary-text-color); /* remove the grey tap highlights in iOS on the fullscreen touch targets */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - --mdc-drawer-width: 56px; + --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px)); --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); --safe-area-content-inset-left: 0px; --safe-area-content-inset-right: var(--safe-area-inset-right); } :host([expanded]) { - --mdc-drawer-width: calc(256px + var(--safe-area-inset-left)); + --mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px)); } :host([modal]) { --mdc-drawer-width: unset;