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

* Add safe areas to bottom sheet

* Add safe areas to automation sidebar

* Remove

* Add safe areas

* Add safe areas

* Switch

src/components/ha-bottom-sheet.ts

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

src/components/ha-resizable-bottom-sheet.ts

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

src/panels/config/automation/ha-automation-sidebar.ts

@@ -211,7 +211,9 @@ export default class HaAutomationSidebar extends LitElement {
     :host {
       z-index: 6;
       outline: none;
-      height: 100%;
+      height: calc(
+        100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
+      );
       --ha-card-border-radius: var(
         --ha-dialog-border-radius,
         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-style: solid;
       --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) {

src/panels/config/automation/styles.ts

@@ -148,7 +148,13 @@ export const manualEditorStyles = css`
   ha-automation-sidebar {
     position: fixed;
     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);
     display: block;
   }