Fixes #959

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.

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;

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;

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;
 }

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;