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

Add safe areas to bottom sheets and sidebar (#27009)

Browse Source 
* Add safe areas to bottom sheet

* Add safe areas to automation sidebar

* Remove

* Add safe areas

* Add safe areas

* Switch
This commit is contained in:
Aidan Timson
2025-09-16 15:48:06 +01:00
committed by GitHub
parent 8cf0d8d2c3
commit 0a5b31e328
4 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ha-bottom-sheet.ts
View File

@@ -54,9 +54,9 @@ export class HaBottomSheet extends LitElement {
border-top-left-radius: var(--ha-border-radius-lg); border-top-left-radius: var(--ha-border-radius-lg);
border-top-right-radius: var(--ha-border-radius-lg); border-top-right-radius: var(--ha-border-radius-lg);
max-height: 90vh; max-height: 90vh;
} margin-bottom: var(--safe-area-inset-bottom);
wa-drawer::part(body) { margin-left: var(--safe-area-inset-left);
padding-bottom: var(--safe-area-inset-bottom); margin-right: var(--safe-area-inset-right);
} }
`; `;
} }

7
src/components/ha-resizable-bottom-sheet.ts
View File

@@ -225,7 +225,9 @@ export class HaResizableBottomSheet extends LitElement {
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
position: fixed; position: fixed;
width: calc(100% - 4px); width: calc(
100% - 4px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
);
max-width: 100%; max-width: 100%;
border: none; border: none;
box-shadow: var(--wa-shadow-l); box-shadow: var(--wa-shadow-l);
@@ -252,6 +254,9 @@ export class HaResizableBottomSheet extends LitElement {
border-bottom-width: 0; border-bottom-width: 0;
border-style: var(--ha-bottom-sheet-border-style); border-style: var(--ha-bottom-sheet-border-style);
border-color: var(--ha-bottom-sheet-border-color); border-color: var(--ha-bottom-sheet-border-color);
margin-bottom: var(--safe-area-inset-bottom);
margin-left: var(--safe-area-inset-left);
margin-right: var(--safe-area-inset-right);
} }
dialog.show { dialog.show {

6
src/panels/config/automation/ha-automation-sidebar.ts
View File

@@ -211,7 +211,9 @@ export default class HaAutomationSidebar extends LitElement {
:host { :host {
z-index: 6; z-index: 6;
outline: none; outline: none;
height: 100%; height: calc(
100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
);
--ha-card-border-radius: var( --ha-card-border-radius: var(
--ha-dialog-border-radius, --ha-dialog-border-radius,
var(--ha-border-radius-2xl) var(--ha-border-radius-2xl)
@@ -220,6 +222,8 @@ export default class HaAutomationSidebar extends LitElement {
--ha-bottom-sheet-border-width: 2px; --ha-bottom-sheet-border-width: 2px;
--ha-bottom-sheet-border-style: solid; --ha-bottom-sheet-border-style: solid;
--ha-bottom-sheet-border-color: var(--primary-color); --ha-bottom-sheet-border-color: var(--primary-color);
margin-top: var(--safe-area-inset-top);
margin-bottom: var(--safe-area-inset-bottom);
} }
@media all and (max-width: 870px) { @media all and (max-width: 870px) {

8
src/panels/config/automation/styles.ts
View File

@@ -148,7 +148,13 @@ export const manualEditorStyles = css`
ha-automation-sidebar { ha-automation-sidebar {
position: fixed; position: fixed;
top: calc(var(--header-height) + 16px); top: calc(var(--header-height) + 16px);
height: calc(-81px + 100dvh); height: calc(
-81px +
100dvh - var(--safe-area-inset-top, 0px) - var(
--safe-area-inset-bottom,
0px
)
);
width: var(--sidebar-width); width: var(--sidebar-width);
display: block; display: block;
} }