diff --git a/index.html b/index.html
index 2462ad7..0553132 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <title>Ribbon theme for Shower</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="stylesheet" href="styles/styles.css">
     <style>
         .shower {
diff --git a/styles/shower/shower-list.css b/styles/shower/shower-list.css
index a3dce24..da96b2e 100644
--- a/styles/shower/shower-list.css
+++ b/styles/shower/shower-list.css
@@ -1,9 +1,20 @@
 /* Shower List */
 
 .shower.list {
-    padding: calc(
-        var(--slide-gap) * var(--slide-scale)
+    --shower-list-block: calc(
+        var(--slide-gap) *
+        var(--slide-scale)
+    );
+    --shower-list-inline: calc(
+        var(--slide-gap) *
+        var(--slide-scale) +
+        env(safe-area-inset-left)
     );
+
+    padding:
+        var(--shower-list-block)
+        var(--shower-list-inline);
+
     box-sizing: border-box;
     width: 100%;
     display: grid;
