1 files changed, 54 insertions, 1 deletions
diff --git a/src/App.scss b/src/App.scss
index f2972eda..e2e2d079 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -47,6 +47,7 @@ html {
 }
 
 body {
+  overscroll-behavior-y: none;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
@@ -319,7 +320,7 @@ option {
 
 i[class*=icon-] {
   color: $fallback--icon;
-  color: var(--icon, $fallback--icon)
+  color: var(--icon, $fallback--icon);
 }
 
 .btn-block {
@@ -858,6 +859,10 @@ nav {
     display: block;
     margin-right: 0.8em;
   }
+
+  .main {
+    margin-bottom: 7em;
+  }
 }
 
 .select-multiple {
@@ -924,3 +929,51 @@ nav {
   background-color: $fallback--fg;
   background-color: var(--panel, $fallback--fg);
 }
+
+.unread-chat-count {
+  font-size: 0.9em;
+  font-weight: bolder;
+  font-style: normal;
+  position: absolute;
+  right: 0.6rem;
+  padding: 0 0.3em;
+  min-width: 1.3rem;
+  min-height: 1.3rem;
+  max-height: 1.3rem;
+  line-height: 1.3rem;
+}
+
+.chat-layout {
+  // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
+  overflow: hidden;
+  height: 100%;
+
+  // Ensures the fixed position of the mobile browser bars on scroll up / down events.
+  // Prevents the mobile browser bars from overlapping or hiding the message posting form.
+  @media all and (max-width: 800px) {
+    body {
+      height: 100%;
+    }
+
+    #app {
+      height: 100%;
+      overflow: hidden;
+      min-height: auto;
+    }
+
+    #app_bg_wrapper {
+      overflow: hidden;
+    }
+
+    .main {
+      overflow: hidden;
+      height: 100%;
+    }
+
+    #content {
+      padding-top: 0;
+      height: 100%;
+      overflow: visible;
+    }
+  }
+}