From 2cec3c4e90f83f57ce60905ecc574ff8b82660dc Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 21 Apr 2020 16:54:56 +1000
Subject: [PATCH] chat-fe: fix unreadnotice position on mobile

---
 pkg/interface/chat/src/css/custom.css                     | 7 +++++++
 pkg/interface/chat/src/js/components/lib/unread-notice.js | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/chat/src/css/custom.css b/pkg/interface/chat/src/css/custom.css
index c6c814428..c8424c4c5 100644
--- a/pkg/interface/chat/src/css/custom.css
+++ b/pkg/interface/chat/src/css/custom.css
@@ -173,6 +173,10 @@ h2 {
   color: #7ea899;
 }
 
+.unread-notice {
+  top: 48px;
+}
+
 /* responsive */
 
 @media all and (max-width: 34.375em) {
@@ -191,6 +195,9 @@ h2 {
   .embed-container {
     padding-bottom: 56.25%;
   }
+  .unread-notice {
+    top: 96px;
+  }
 }
 
 @media all and (min-width: 34.375em) and (max-width: 46.875em) {
diff --git a/pkg/interface/chat/src/js/components/lib/unread-notice.js b/pkg/interface/chat/src/js/components/lib/unread-notice.js
index 8f7ae5a54..1c59aa2c3 100644
--- a/pkg/interface/chat/src/js/components/lib/unread-notice.js
+++ b/pkg/interface/chat/src/js/components/lib/unread-notice.js
@@ -17,8 +17,8 @@ export class UnreadNotice extends Component {
 
     return (
       <div
-        style={{ left: "0px", top: "48px" }}
-        className="pa4 w-100 absolute z-1"
+        style={{ left: "0px" }}
+        className="pa4 w-100 absolute z-1 unread-notice"
       >
         <div className="ba b--green2 green2 bg-white bg-gray0-d flex items-center pa2 f9 justify-between br1">
           <p className="lh-copy db">
@@ -30,7 +30,7 @@ export class UnreadNotice extends Component {
             )}
             <span className="green3">{timestamp}</span>
           </p>
-          <div onClick={onRead} className="inter b--green2 pointer">
+          <div onClick={onRead} className="ml4 inter b--green2 pointer tr lh-copy">
             Mark as Read
           </div>
         </div>