diff --git a/app/index.ejs b/app/index.ejs
index f7aa47050..51711f0c3 100644
--- a/app/index.ejs
+++ b/app/index.ejs
@@ -2,7 +2,7 @@
-
+
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 561e66307..12ca0146c 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -12,6 +12,7 @@
position: absolute;
top: 10px;
left: 10px;
+ left: max(10px, env(safe-area-inset-left));
z-index: 1;
}
@@ -19,6 +20,7 @@
position: absolute;
top: 10px;
right: 10px;
+ right: max(10px, env(safe-area-inset-right));
z-index: 1;
.subscription-button {
@@ -149,6 +151,7 @@
@media screen and (max-width: 895px) {
top: -45px;
left: 20px;
+ left: max(20px + env(safe-area-inset-left));
height: 90px;
width: 90px;
@@ -178,7 +181,11 @@
@media screen and (max-width: 895px) {
max-width: 900px;
- padding: 10px 10px 0;
+ padding-top: 10px;
+ padding-left: 10px;
+ padding-left: max(10px, env(safe-area-inset-left));
+ padding-right: 10px;
+ padding-right: max(10px, env(safe-area-inset-right));
flex-direction: column-reverse;
min-height: 50px;
}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 427060e31..e40681091 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -685,6 +685,8 @@
display: flex;
position: relative;
padding: 10px 0;
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
align-items: center;
justify-content: center;
@@ -704,7 +706,8 @@
&__close {
position: absolute;
right: 10px;
- color: #999;
+ right: max(10px, env(safe-area-inset-right));
+ color: var(--primary-text-color--faint);
}
&__content {
@@ -712,6 +715,8 @@
flex-direction: row;
flex: 1;
padding: 10px;
+ padding-left: max(10px, env(safe-area-inset-left));
+ padding-right: max(10px, env(safe-area-inset-right));
overflow-y: hidden;
&--scroll {
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 1a6b19d5c..bf03ed610 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -24,7 +24,10 @@
width: 100%;
max-width: 1200px;
margin: 0 auto;
- padding: 0 15px;
+ padding-left: 15px;
+ padding-left: max(15px, env(safe-area-inset-left));
+ padding-right: 15px;
+ padding-right: max(15px, env(safe-area-inset-right));
// NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; }
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index c75b47ef2..6398aeb32 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -261,6 +261,7 @@
background: var(--foreground-color);
position: absolute;
margin-top: 5px;
+ transform: translateX(calc(-1 * env(safe-area-inset-right))); /* iOS PWA */
z-index: 20000;
.emoji-mart-scroll {