fix: ChatInput Formatter Tool UI for small screens

packages/react/src/views/ChatInput/AudioMessageRecorder.js

@@ -11,7 +11,8 @@ import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 
-const AudioMessageRecorder = ({ disabled }) => {
+const AudioMessageRecorder = (props) => {
+  const { disabled, displayName, popOverItemStyles } = props;
   const videoRef = useRef(null);
   const { theme } = useTheme();
   const styles = getCommonRecorderStyles(theme);
@@ -136,7 +137,17 @@ const AudioMessageRecorder = ({ disabled }) => {
   }, [isRecorded, file]);
 
   if (state === 'idle') {
-    return (
+    return displayName ? (
+      <Box
+        key="audio"
+        css={popOverItemStyles}
+        onClick={handleRecordButtonClick}
+        disabled={disabled}
+      >
+        <Icon name="mic" size="1rem" />
+        <span>{displayName}</span>
+      </Box>
+    ) : (
       <Tooltip text="Audio Message" position="top">
         <ActionButton
           ghost

packages/react/src/views/ChatInput/ChatInput.js

@@ -524,7 +524,7 @@ const ChatInput = ({ scrollToBottom }) => {
             disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage}
             placeholder={
               isUserAuthenticated && canSendMsg
-                ? `Message #${channelInfo.name}`
+                ? `Message ${channelInfo.name ? `#${channelInfo.name}` : ''}`
                 : isUserAuthenticated
                 ? 'This room is read only'
                 : 'Sign in to chat'

packages/react/src/views/ChatInput/ChatInput.styles.js

@@ -10,6 +10,10 @@ export const getChatInputStyles = (theme) => {
       &.focused {
         border: ${`1.5px solid ${theme.colors.ring}`};
       }
+      @media (max-width: 500px) {
+        margin: 0;
+        width: 100%;
+      }
     `,
 
     editMessage: css`
@@ -80,10 +84,27 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => {
       position: relative;
       gap: 0.1rem;
       border-radius: 0 0 ${theme.radius} ${theme.radius};
-      @media (max-width: 383px) {
-        display: grid;
-        grid-template-columns: repeat(5, 0.2fr);
-      }
+    `,
+    popOverStyles: css`
+      position: absolute;
+      bottom: 3rem;
+      left: 0;
+      width: 100%;
+      background: ${theme.colors.background};
+      box-shadow: 0 -8px 10px ${mode === 'light' ? darken(theme.colors.background, 0.1) : lighten(theme.colors.background, 1)};
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      z-index: 1300;
+    `,
+    popOverItemStyles: css`
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      cursor: pointer;
+      padding: 0.5rem;
     `,
   };
   return styles;
@@ -101,8 +122,8 @@ export const getCommonRecorderStyles = (theme) => {
     `,
 
     controller: css`
-      display: flex;
       gap: 0.15rem;
+      display: inline-flex;
     `,
 
     timer: css`