fix(chat): fix chat input placeholder positioning. Closes #2991

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -2,7 +2,15 @@ import { Popover } from 'antd';
 import React, { FC, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, BaseEditor, Text, Descendant, Editor } from 'slate';
-import { Slate, Editable, withReact, ReactEditor, useSelected, useFocused } from 'slate-react';
+import {
+  Slate,
+  DefaultPlaceholder,
+  Editable,
+  withReact,
+  ReactEditor,
+  useSelected,
+  useFocused,
+} from 'slate-react';
 import dynamic from 'next/dynamic';
 import classNames from 'classnames';
 import WebsocketService from '../../../services/websocket-service';
@@ -247,6 +255,16 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled })
             disabled={!enabled}
             readOnly={!enabled}
             renderElement={renderElement}
+            renderPlaceholder={({ children, attributes }) => (
+              <DefaultPlaceholder
+                attributes={{
+                  ...attributes,
+                  style: { ...attributes.style, top: '15%' },
+                }}
+              >
+                {children}
+              </DefaultPlaceholder>
+            )}
             placeholder={enabled ? 'Send a message to chat' : 'Chat is currently unavailable.'}
             style={{ width: '100%' }}
             role="textbox"