Fixed message box misalignment and updated responsiveness for chat me…

…ssages
RocketChat · Sep 2, 2024 · 42238b5 · 42238b5
1 parent 7900613
commit 42238b5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
@@ -208,7 +208,7 @@ const ChatBody = ({
         ref={messageListRef}
         css={styles.chatbodyContainer}
         style={{
-          ...styleOverrides,
+          ...styleOverrides
         }}
         className={`ec-chat-body ${classNames}`}
       >

diff --git a/packages/react/src/views/ChatBody/ChatBody.styles.js b/packages/react/src/views/ChatBody/ChatBody.styles.js
@@ -9,7 +9,7 @@ export const useChatbodyStyles = () => {
     overflow-x: hidden;
     display: flex;
     flex-direction: column-reverse;
-    max-height: 600px;
+    max-height: 900px;
     position: relative;
     padding-top: 70px;
     margin-top: 0.25rem;

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
@@ -420,7 +420,13 @@ const ChatInput = ({ scrollToBottom }) => {
   };
 
   return (
-    <Box className={`ec-chat-input ${classNames}`} style={styleOverrides}>
+    <Box 
+     css={css`
+       margin-bottom:0;
+       margin-top:auto;
+      `
+     }
+    >
       <Box>
         {(quoteMessage.msg || quoteMessage.attachments) && (
           <QuoteMessage message={quoteMessage} />

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -4,9 +4,10 @@ import { darken, lighten, useTheme } from '@embeddedchat/ui-elements';
 export const useChatInputStyles = () => {
   const { theme, colors } = useTheme();
   const inputWithFormattingBox = css`
+     bottom:0;
     border: 1px solid ${colors.border};
     border-radius: ${theme.schemes.radius};
-    margin: 0.5rem 2rem 1rem 2rem;
+    margin: 2rem 2rem 0.4rem 1.5rem;
     &.focused {
       border: ${`1.5px solid ${colors.ring}`};
     }
@@ -34,8 +35,8 @@ export const useChatInputStyles = () => {
     white-space: pre-wrap;
     overflow: auto;
     overflow-x: hidden;
-    resize: none;
     border: none;
+    resize:none;
     outline: none;
     font-size: 14px;
 
@@ -75,10 +76,10 @@ export const useChatInputFormattingToolbarStyles = () => {
     display: flex;
     position: relative;
     flex-direction: row;
-    gap: 0.375rem;
+    gap: 0.3rem;
     border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius};
   `;
-
+   
   return { chatFormat };
 };
 

diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
@@ -10,15 +10,27 @@ export const useMessageStyles = () => {
     align-items: flex-start;
     padding-top: 0.5rem;
     padding-bottom: 0.25rem;
-    padding-left: 2.25rem;
+    padding-left: 1rem;
     padding-right: 2.25rem;
     color: ${colors.foreground};
 
     &:hover {
       background-color: ${mode === 'light'
-        ? darken(colors.background, 0.03)
-        : lighten(colors.background, 1)};
+      ? darken(colors.background, 0.03)
+      : lighten(colors.background, 1)};
     }
+
+    @media (max-width: 900px) {
+       font-size: 0.8rem;
+     }
+
+    @media (max-width: 600px) {
+        font-size: 0.7rem;
+     }
+
+    @media (max-width: 400px) {
+       font-size: 0.4rem;
+     }
   `;
   const messageEditing = css`
     background-color: ${colors.secondary};
@@ -63,6 +75,8 @@ export const MessageBodyStyles = {
     opacity: 1;
     margin-top: 0.125rem;
     margin-bottom: 0.125rem;
+    
+   
   `,
 };
 
@@ -126,13 +140,23 @@ export const useMessageHeaderStyles = () => {
 
   const name = css`
     letter-spacing: 0rem;
-    font-size: 0.875rem;
     font-weight: 700;
     line-height: 1.25rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 1;
+     @media (max-width: 900px) {
+      font-size: 0.8rem;
+    }
+
+    @media (max-width: 600px) {
+        font-size: 0.7rem;
+     }
+
+    @media (max-width: 400px) {
+        font-size: 0.6rem;
+     }
   `;
 
   const userName = css`
@@ -279,7 +303,7 @@ export const useMessageToolboxStyles = () => {
   const emojiPickerStyles = css`
     position: absolute;
     bottom: 100%;
-    right: 1.5rem;
+    right: 4.2rem;
   `;
 
   return {