diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index af3eacadaf..202fd66e08 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -175,6 +175,9 @@
     flex-direction: column;
     contain: layout style paint;
     transition: background ease-in-out 0.5s;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
 }
 
 .layout-tv .skinHeader {
@@ -1146,10 +1149,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .padded-left {
     padding-left: 3.3%;
+    padding-left: max(env(safe-area-inset-left), 3.3%);
 }
 
 .padded-right {
     padding-right: 3.3%;
+    padding-right: max(env(safe-area-inset-right), 3.3%);
 }
 
 .padded-top {
@@ -1173,6 +1178,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 @media all and (min-height: 31.25em) {
     .padded-right-withalphapicker {
         padding-right: 7.5%;
+        padding-right: max(env(safe-area-inset-left), 7.5%);
     }
 }
 
diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss
index 3d4ea7da0e..f3f1a699b7 100644
--- a/src/assets/css/site.scss
+++ b/src/assets/css/site.scss
@@ -84,6 +84,7 @@ div[data-role="page"] {
 .pageWithAbsoluteTabs .pageTabContent {
     /* provides room for the music controls */
     padding-bottom: 5em !important;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
 }
 
 .readOnlyContent {
diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss
index c0ef57dd5c..020a835f59 100644
--- a/src/assets/css/videoosd.scss
+++ b/src/assets/css/videoosd.scss
@@ -12,8 +12,11 @@
     right: 0;
     position: fixed;
     background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
     padding-top: 7.5em;
     padding-bottom: 1.75em;
+    padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
     display: flex;
     flex-direction: row;
     justify-content: center;
diff --git a/src/components/alphaPicker/style.scss b/src/components/alphaPicker/style.scss
index 8feb3e50e0..7a3f6eaf87 100644
--- a/src/components/alphaPicker/style.scss
+++ b/src/components/alphaPicker/style.scss
@@ -12,6 +12,7 @@
 .alphaPicker-fixed {
     position: fixed;
     bottom: 5.5em;
+    bottom: max(env(safe-area-inset-bottom), 5.5em);
 }
 
 .alphaPickerRow {
@@ -45,6 +46,7 @@
 @media all and (max-height: 50em) {
     .alphaPicker-fixed {
         bottom: 5em;
+        bottom: max(env(safe-area-inset-bottom), 5em);
     }
 
     .alphaPickerButton-vertical {
@@ -104,15 +106,18 @@
 
 .alphaPicker-fixed.alphaPicker-tv {
     bottom: 1%;
+    bottom: max(env(safe-area-inset-bottom), 1%);
 }
 
 .alphaPicker-fixed-right {
     right: 0.4em;
+    right: max(env(safe-area-inset-right), 0.4em);
 }
 
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
         right: 1em;
+        right: max(env(safe-area-inset-right), 1em);
     }
 }
 
diff --git a/src/components/appFooter/appFooter.scss b/src/components/appFooter/appFooter.scss
index 6dc00b00c2..1048a8e214 100644
--- a/src/components/appFooter/appFooter.scss
+++ b/src/components/appFooter/appFooter.scss
@@ -6,6 +6,13 @@
     bottom: 0;
     transition: transform 180ms linear;
     contain: layout style;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.appfooter:empty {
+    padding: 0;
 }
 
 .appfooter.headroom--unpinned {
diff --git a/src/components/multiSelect/multiSelect.scss b/src/components/multiSelect/multiSelect.scss
index 39b50aa17e..63db296621 100644
--- a/src/components/multiSelect/multiSelect.scss
+++ b/src/components/multiSelect/multiSelect.scss
@@ -14,7 +14,13 @@
     top: 0;
     left: 0;
     right: 0;
-    padding: 1em 0.5em;
+    padding-left: 0.5em;
+    padding-left: max(env(safe-area-inset-left), 0.5em);
+    padding-right: 0.5em;
+    padding-right: max(env(safe-area-inset-right), 0.5em);
+    padding-top: 1em;
+    padding-top: max(env(safe-area-inset-top), 1em);
+    padding-bottom: 1em;
     display: flex;
     align-items: center;
     z-index: 99999;
diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index 6dc769e710..b19be860d7 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -195,7 +195,10 @@
     height: 4.2em;
     right: 0;
     padding-left: 7.3%;
+    padding-left: max(env(safe-area-inset-left), 7.3%);
     padding-right: 7.3%;
+    padding-right: max(env(safe-area-inset-right), 7.3%);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .layout-desktop .playlistSectionButton,
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index cb16573f48..a2105f61f5 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -4,7 +4,12 @@
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
-    padding: 1em;
+    padding-left: 1em;
+    padding-left: max(env(safe-area-inset-left), 1em);
+    padding-right: 1em;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-bottom: max(env(safe-area-inset-bottom), 1em);
     display: flex;
     flex-direction: column;
 }
diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss
index d4d2c69c85..09a5856b0e 100644
--- a/src/elements/emby-scroller/emby-scroller.scss
+++ b/src/elements/emby-scroller/emby-scroller.scss
@@ -4,7 +4,9 @@
 
 .emby-scroller {
     margin-left: 3.3%;
+    margin-left: max(env(safe-area-inset-left), 3.3%);
     margin-right: 3.3%;
+    margin-right: max(env(safe-area-inset-right), 3.3%);
 }
 
 /* align first card in scroller to heading */
@@ -21,7 +23,9 @@
 .layout-tv .emby-scroller,
 .layout-mobile .emby-scroller {
     padding-left: 3.3%;
+    padding-left: max(env(safe-area-inset-left), 3.3%);
     padding-right: 3.3%;
+    padding-right: max(env(safe-area-inset-right), 3.3%);
     margin-left: 0;
     margin-right: 0;
 }
diff --git a/src/index.html b/src/index.html
index d77378d3f8..112b644f1a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -102,6 +102,7 @@
             bottom: 0;
             z-index: 1;
             width: 0.8em;
+            padding-left: env(safe-area-inset-left);
         }
 
         @-webkit-keyframes fadein {
diff --git a/src/libraries/navdrawer/navdrawer.scss b/src/libraries/navdrawer/navdrawer.scss
index 6d5d098de2..361d855154 100644
--- a/src/libraries/navdrawer/navdrawer.scss
+++ b/src/libraries/navdrawer/navdrawer.scss
@@ -4,6 +4,8 @@
     top: 0;
     bottom: 0;
     contain: strict;
+    box-sizing: border-box;
+    padding-left: env(safe-area-inset-left);
 }
 
 .touch-menu-la {
diff --git a/src/plugins/htmlVideoPlayer/style.scss b/src/plugins/htmlVideoPlayer/style.scss
index 7d984b69aa..390e25a994 100644
--- a/src/plugins/htmlVideoPlayer/style.scss
+++ b/src/plugins/htmlVideoPlayer/style.scss
@@ -7,6 +7,10 @@
     display: flex;
     align-items: center;
     background: #000 !important;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .videoPlayerContainer-onTop {
@@ -58,6 +62,9 @@ video[controls]::-webkit-media-controls {
     right: 0;
     color: #fff;
     font-size: 170%;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .videoSubtitlesInner {
diff --git a/src/plugins/youtubePlayer/style.scss b/src/plugins/youtubePlayer/style.scss
index 1328e6f3d5..1188619b26 100644
--- a/src/plugins/youtubePlayer/style.scss
+++ b/src/plugins/youtubePlayer/style.scss
@@ -7,6 +7,10 @@
     right: 0;
     display: flex;
     align-items: center;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .youtubePlayerContainer.onTop {