jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Safe area: sidebar and notification drawer (#26853)

Browse Source 
* 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
This commit is contained in:
Aidan Timson
2025-09-09 10:59:24 +01:00
committed by GitHub
parent dec9d304da
commit cc70eb46c9
4 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ha-header-bar.ts
View File

@@ -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;

28
src/components/ha-sidebar.ts
View File

@@ -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 {