From 2c8c872a65365c1297e0b69468317d99e6bfabb6 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 29 Jan 2018 15:03:10 +0100
Subject: [PATCH] Fixes #959

---
 CHANGES.md       | 1 +
 css/converse.css | 2 ++
 css/inverse.css  | 2 ++
 css/mobile.css   | 6 ++++--
 sass/_core.scss  | 2 ++
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 429e2840c..752db6062 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@
 
 - Various fixes for IE11.
 - Could not register on Ejabberd 18. `"Missing attribute 'id' in tag qualified by namespace 'jabber:client'"`
+- #959 Add padding for the iPhone X (to the mobile CSS).
 - #993 `moment.format` is not a function error when sending a message.
 - #994 TypeError when using the `user.login` API.
 - #995 `ChildNode.replaceWith` is not available in Internet Explorer or Safari. Use `Node.replaceChild` instead.
diff --git a/css/converse.css b/css/converse.css
index 1d3abfaa2..c77fe167a 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1099,6 +1099,8 @@
 
 #converse-embedded-chat,
 #conversejs {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   bottom: 0;
   color: #777;
   direction: ltr;
diff --git a/css/inverse.css b/css/inverse.css
index 8a36b8fd3..626de15e4 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -1099,6 +1099,8 @@
 
 #converse-embedded-chat,
 #conversejs {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   bottom: 0;
   color: #777;
   direction: ltr;
diff --git a/css/mobile.css b/css/mobile.css
index b4879b218..a341df1f2 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -1,11 +1,13 @@
 #conversejs {
     left: 0px;
     right: 0px;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
 }
 .converse-chatroom {
     font-size: 14px;
 }
 .intro {
-  padding: 0;
-  height: 100vh;
+    padding: 0;
+    height: 100vh;
 }
diff --git a/sass/_core.scss b/sass/_core.scss
index e183c88d0..61449df56 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -8,6 +8,8 @@
 
 #converse-embedded-chat,
 #conversejs {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
     bottom: 0;
     color: $text-color;
     direction: ltr;