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],

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,45 +197,40 @@ export const ChatTextField: FC<ChatTextFieldProps> = () => {
   };
 
   return (
-    <div>
-      <div className={styles.root}>
-        <Slate editor={editor} value={defaultEditorValue}>
-          <Editable
-            onKeyDown={onKeyDown}
-            renderElement={renderElement}
-            placeholder="Chat message goes here..."
-            style={{ width: '100%' }}
-            autoFocus
-          />
-          <Popover
-            content={
-              <EmojiPicker
-                onEmojiSelect={onEmojiSelect}
-                onCustomEmojiSelect={onCustomEmojiSelect}
-              />
-            }
-            trigger="click"
-            onVisibleChange={visible => setShowEmojis(visible)}
-            visible={showEmojis}
-          />
-        </Slate>
-
-        <button
-          type="button"
-          className={styles.emojiButton}
-          title="Emoji picker button"
-          onClick={() => setShowEmojis(!showEmojis)}
-        >
-          <SmileOutlined />
-        </button>
-        <Button
-          className={styles.sendButton}
-          size="large"
-          type="ghost"
-          icon={<SendOutlined />}
-          onClick={sendMessage}
+    <div className={styles.root}>
+      <Slate editor={editor} value={defaultEditorValue}>
+        <Editable
+          onKeyDown={onKeyDown}
+          renderElement={renderElement}
+          placeholder="Chat message goes here..."
+          style={{ width: '100%' }}
+          autoFocus
         />
-      </div>
+        <Popover
+          content={
+            <EmojiPicker onEmojiSelect={onEmojiSelect} onCustomEmojiSelect={onCustomEmojiSelect} />
+          }
+          trigger="click"
+          onVisibleChange={visible => setShowEmojis(visible)}
+          visible={showEmojis}
+        />
+      </Slate>
+
+      <button
+        type="button"
+        className={styles.emojiButton}
+        title="Emoji picker button"
+        onClick={() => setShowEmojis(!showEmojis)}
+      >
+        <SmileOutlined />
+      </button>
+      <Button
+        className={styles.sendButton}
+        size="large"
+        type="ghost"
+        icon={<SendOutlined />}
+        onClick={sendMessage}
+      />
     </div>
   );
 };