Add safe areas to ha-hanel-custom

Author: timmo001

src/panels/custom/ha-panel-custom.ts

@@ -147,10 +147,19 @@ export class HaPanelCustom extends ReactiveElement {
       <style>
         iframe {
           border: 0;
-          width: 100%;
-          height: 100%;
+          width: calc(100% - var(--safe-area-inset-right, 0px));
+          height: calc(100% - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px));
           display: block;
           background-color: var(--primary-background-color);
+          margin-top: var(--safe-area-inset-top);
+          margin-bottom: var(--safe-area-inset-bottom);
+          margin-right: var(--safe-area-inset-right);
+        }
+        @media (max-width: 870px) {
+          iframe {
+            width: calc(100% - var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px));
+            margin-left: var(--safe-area-inset-left);
+          }
         }
       </style>
       <iframe ${titleAttr}></iframe>`.trim();