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,6 +30,7 @@ const AddMessagesChatExample = args => {
 
   return (
     <RecoilRoot>
+      <div style={{ height: '70vh', position: 'relative' }}>
         <button type="button" onClick={() => setChatMessages([...chatMessages, chatMessages[0]])}>
           Add message
         </button>
@@ -39,6 +40,7 @@ const AddMessagesChatExample = args => {
           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],

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -5,6 +5,8 @@
   width: 100%;
   padding: 0.3rem;
   color: var(--theme-color-components-form-field-text);
+  border-radius: var(--theme-rounded-corners);
+  outline: 1px solid gray;
   overflow-x: hidden;
 
   div[role='textbox'] {

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -197,7 +197,6 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
   };
 
   return (
-    <div>
     <div className={styles.root}>
       <Slate editor={editor} value={defaultEditorValue}>
         <Editable
@@ -209,10 +208,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
         />
         <Popover
           content={
-              <EmojiPicker
-                onEmojiSelect={onEmojiSelect}
-                onCustomEmojiSelect={onCustomEmojiSelect}
-              />
+            <EmojiPicker onEmojiSelect={onEmojiSelect} onCustomEmojiSelect={onCustomEmojiSelect} />
           }
           trigger="click"
           onVisibleChange={visible => setShowEmojis(visible)}
@@ -236,6 +232,5 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
         onClick={sendMessage}
       />
     </div>
-    </div>
   );
 };