From a72389b1a822192ff33420b8d2c2225cf589406b Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Thu, 27 Oct 2022 21:24:00 -0700
Subject: [PATCH] hiding x overflow on topic message

---
 net/web/src/session/conversation/Conversation.jsx    |  9 +++++++--
 .../src/session/conversation/Conversation.styled.js  | 12 +++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index 6b5c233b..c39786e7 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -59,8 +59,13 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
         )}
       </div>
       <div class="thread" ref={thread} onScroll={scrollThread}>
-        <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics} gutter="0"
-            renderItem={topicRenderer} />
+        { state.topics.length === 0 && (
+          <div class="empty">This Topic Has No Messages</div>
+        )}
+        { state.topics.length !== 0 && (
+          <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.topics}
+              gutter="0" renderItem={topicRenderer} />
+        )}
         { state.loadingInit && (
           <div class="loading">
             <Spin size="large" delay={250} />
diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js
index 16d0aa05..5e94402b 100644
--- a/net/web/src/session/conversation/Conversation.styled.js
+++ b/net/web/src/session/conversation/Conversation.styled.js
@@ -54,10 +54,20 @@ export const ConversationWrapper = styled.div`
     position: relative;
     flex-grow: 1;
     min-height: 0;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     display: flex;
     flex-direction: column-reverse;
 
+    .empty {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20;
+      color: ${Colors.grey};
+    }
+
     .loading {
       position: absolute;
       width: 100%;