fixed chat container not showing in SB + minor changes

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -9,11 +9,17 @@
 
 .toBottomWrap {
   display: flex;
-  opacity: 0.9;
   width: 100%;
   justify-content: center;
   position: absolute;
-  bottom: 75px;
+  bottom: 50px;
+  color: var(--text-color-secondary);
+  & .toBottomWrap {
+    & .toBottomBtn {
+      border: none;
+      background-color: gray;
+    }
+  }
 }
 
 .nameChangeView {
@@ -36,6 +42,7 @@
 .chatContainer {
   display: grid;
   grid-template-rows: 1fr 65px;
+  background-color: var(--theme-color-background-chat);
   height: 100%;
 }
 .virtuoso {

web/components/chat/ChatContainer/ChatContainer.stories.tsx

@@ -30,15 +30,17 @@ const AddMessagesChatExample = args => {
 
   return (
     <RecoilRoot>
-      <button type="button" onClick={() => setChatMessages([...chatMessages, chatMessages[0]])}>
-        Add message
-      </button>
-      <ChatContainer
-        messages={chatMessages}
-        usernameToHighlight="testuser"
-        chatUserId="testuser"
-        isModerator={false}
-      />
+      <div style={{ height: '70vh', position: 'relative' }}>
+        <button type="button" onClick={() => setChatMessages([...chatMessages, chatMessages[0]])}>
+          Add message
+        </button>
+        <ChatContainer
+          messages={chatMessages}
+          usernameToHighlight="testuser"
+          chatUserId="testuser"
+          isModerator={false}
+        />
+      </div>
     </RecoilRoot>
   );
 };

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,7 +1,6 @@
-import { Button } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef, CSSProperties, FC } from 'react';
-import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { EditFilled } from '@ant-design/icons';
 import {
   ConnectedClientInfoEvent,
   MessageType,
@@ -15,6 +14,7 @@ import { ChatModeratorNotification } from '../ChatModeratorNotification/ChatMode
 // import ChatActionMessage from '../ChatAction/ChatActionMessage';
 import { ChatSystemMessage } from '../ChatSystemMessage/ChatSystemMessage';
 import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage';
+import { ScrollToBotBtn } from './ScrollToBotBtn';
 
 export type ChatContainerProps = {
   messages: ChatMessage[];
@@ -176,22 +176,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           alignToBottom
           atBottomStateChange={bottom => setAtBottom(bottom)}
         />
-        {!atBottom && (
-          <div className={styles.toBottomWrap}>
-            <Button
-              type="default"
-              icon={<VerticalAlignBottomOutlined />}
-              onClick={() =>
-                chatContainerRef.current.scrollToIndex({
-                  index: messages.length - 1,
-                  behavior: 'smooth',
-                })
-              }
-            >
-              Go to last message
-            </Button>
-          </div>
-        )}
+        {!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />}
       </>
     ),
     [messages, usernameToHighlight, chatUserId, isModerator, atBottom],