Feat: Adding mobile resposiveness

.github/workflows/playwright.yml

@@ -13,45 +13,45 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-        
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 16.19.0
-          
+
       - name: Cache dependencies
         uses: actions/cache@v3
         with:
           path: ~/.yarn
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-            
+
       - name: Install dependencies
         run: yarn install
-        
+
       - name: Build the project
         run: yarn build
-        
+
       - name: Get installed Playwright version
         id: playwright-version
         run: echo "version=$(yarn why --json @playwright/test | grep -h 'workspace:.' | jq --raw-output '.children[].locator' | sed -e 's/@playwright\/test@.*://')" >> $GITHUB_OUTPUT
-        
+
       - uses: actions/cache@v3
         id: playwright-cache
         with:
-          path: '~/.cache/ms-playwright'
-          key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
+          path: "~/.cache/ms-playwright"
+          key: "${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}"
           restore-keys: |
             ${{ runner.os }}-playwright-
-            
+
       - name: Install Playwright's dependencies
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
-        
+
       - name: Run Playwright tests
         run: cd packages/e2e-react && npx playwright test
-        
+
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()

packages/react/src/views/AttachmentPreview/AttachmentPreview.js

@@ -93,6 +93,9 @@ const AttachmentPreview = () => {
           <Box
             css={css`
               margin: 30px;
+              @media (max-width: 768px) {
+                margin: 25px;
+              }
             `}
           >
             <Box css={styles.inputContainer}>
@@ -160,6 +163,9 @@ const AttachmentPreview = () => {
       <Modal.Footer
         css={css`
           margin-top: 1.5rem;
+          @media (max-width: 768px) {
+            margin-top: 0rem;
+          }
         `}
       >
         <Button type="secondary" onClick={toggle}>

packages/react/src/views/AttachmentPreview/PreviewType/audio.js

@@ -1,11 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 
 function PreviewAudio({ previewURL }) {
   return (
-    <Box>
-      <audio src={previewURL} width="100%" controls />
+    <Box
+      css={css`
+        width: 100%;
+
+        @media (max-width: 320px) {
+          max-width: 250px;
+          margin: 0 auto;
+        }
+
+        @media (max-width: 420px) {
+          max-width: 280px;
+          margin: 0 auto;
+        }
+        @media (min-width: 481px) and (max-width: 600px) {
+          width: ;
+        }
+
+        audio {
+          width: 100%;
+          max-width: 100%;
+          @media (max-width: 600px) {
+            max-width: 80%;
+          }
+        }
+      `}
+    >
+      <audio src={previewURL} controls />
     </Box>
   );
 }

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

@@ -62,6 +62,7 @@ export const getChatInputStyles = (theme) => {
         font-size: 18px;
       }
     `,
+
     quoteContainer: css`
       max-height: 300px;
       overflow: scroll;
@@ -165,6 +166,7 @@ export const getInsertLinkModalStyles = (theme) => {
       gap: 0.5rem;
       margin: 1rem 0;
     `,
+
     modalFooter: css`
       padding: 0.75rem 1rem;
     `,

packages/react/src/views/EmojiPicker/EmojiPicker.js

@@ -25,7 +25,16 @@ const CustomEmojiPicker = ({
 
   return (
     <Popup
-      positionStyles={positionStyles}
+      positionStyles={css`
+        ${positionStyles}
+        @media (max-width: 500px) {
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          top: auto;
+        }
+      `}
       wrapperId={wrapperId}
       onClose={onClose}
       height="auto"
@@ -34,7 +43,7 @@ const CustomEmojiPicker = ({
       <Box css={styles.emojiPicker}>
         <EmojiPicker
           height={400}
-          width={350}
+          width="100%"
           onEmojiClick={handleEmojiClick}
           previewConfig={previewConfig}
           searchDisabled={false}

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

@@ -15,6 +15,9 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
         --epr-category-label-bg-color: ${theme.colors.background};
         --epr-category-icon-active-color: ${theme.colors.secondary};
         --epr-emoji-size: 25px;
+        @media(max-width:500px){
+        --epr-emoji-size: 30px;
+        }
         --epr-category-navigation-button-size: 20px;
         --epr-emoji-gap: 10px;
 
@@ -60,6 +63,7 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
         --epr-preview-z-index: 6;
         --epr-search-input-bg-color: ${calculatedColors};
 
+               }
         /* Use these properties of color if needed ->
 
       --epr-shadow: 'theme-color';

packages/react/src/views/FileMessage/Files.styles.js

@@ -113,6 +113,11 @@ export const fileDisplayStyles = {
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 0 0.5rem 0.5rem;
+    @media (max-width: 600px) {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+    }
   `,
 
   centeredColumnStyles: css`

packages/react/src/views/LoginForm/LoginForm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import {
-  GenericModal,
+  Modal,
   Box,
   Button,
   Input,
@@ -83,52 +83,64 @@ export default function LoginForm() {
 
   return isLoginModalOpen ? (
     <>
-      <GenericModal
-        variant="info"
-        title="Login"
-        icon="key"
-        onClose={handleClose}
-      >
-        <Box>
-          {fields.map((field, index) => (
-            <Box key={index} css={styles.fieldContainer}>
-              <Box css={styles.fieldLabel}>{field.label}</Box>
-              <Box css={styles.fieldRow}>
-                <Input
-                  type={field.type || 'text'}
-                  onChange={field.onChange}
-                  placeholder={field.placeholder}
-                  onKeyPress={handleKeyPress}
-                  style={{
-                    ...(field.error && {
-                      borderColor: theme.colors.destructive,
-                      outline: 'none',
-                    }),
-                  }}
-                />
-                {field.label === 'Password' && (
+      <Modal variant="info" onClose={handleClose} css={styles.modal}>
+        <Modal.Header>
+          <Modal.Title css={styles.modalTitle}>
+            <Icon
+              name="key"
+              size="1.25rem"
+              css={css`
+                margin-right: 0.5rem;
+              `}
+            />{' '}
+            Login
+          </Modal.Title>
+          <Modal.Close onClick={handleClose} />
+        </Modal.Header>
+        <Modal.Content>
+          <Box>
+            {fields.map((field, index) => (
+              <Box key={index} css={styles.fieldContainer}>
+                <Box css={styles.fieldLabel}>{field.label}</Box>
+                <Box css={styles.fieldRow}>
+                  <Input
+                    type={field.type || 'text'}
+                    onChange={field.onChange}
+                    placeholder={field.placeholder}
+                    onKeyPress={handleKeyPress}
+                    style={{
+                      ...(field.error && {
+                        borderColor: theme.colors.destructive,
+                        outline: 'none',
+                      }),
+                    }}
+                  />
+                  {field.label === 'Password' && (
+                    <Box
+                      type="button"
+                      css={styles.passwordEye}
+                      onClick={handleTogglePassword}
+                    >
+                      <Icon name={iconName} size="1.25rem" />
+                    </Box>
+                  )}
+                </Box>
+                {field.error && (
                   <Box
-                    type="button"
-                    css={styles.passwordEye}
-                    onClick={handleTogglePassword}
+                    is="span"
+                    css={css`
+                      color: ${theme.colors.destructive};
+                      font-size: 13px;
+                    `}
                   >
-                    <Icon name={iconName} size="1.25rem" />
+                    This field is required
                   </Box>
                 )}
               </Box>
-              {field.error && (
-                <Box
-                  is="span"
-                  css={css`
-                    color: ${theme.colors.destructive};
-                    font-size: 13px;
-                  `}
-                >
-                  This field is required
-                </Box>
-              )}
-            </Box>
-          ))}
+            ))}
+          </Box>
+        </Modal.Content>
+        <Modal.Footer>
           <Button
             type="primary"
             onClick={handleSubmit}
@@ -138,8 +150,8 @@ export default function LoginForm() {
           >
             Login
           </Button>
-        </Box>
-      </GenericModal>
+        </Modal.Footer>
+      </Modal>
     </>
   ) : null;
 }

packages/react/src/views/Message/BubbleVariant/Bubble.styles.js

@@ -167,6 +167,9 @@ export const getBubbleStylesMe = (theme) => {
       .ec-message-body:hover & {
         left: auto;
         right: calc(100% - 20px);
+        @media (max-width: 600px) {
+          right: 0;
+        }
       }
     `,
 
@@ -181,7 +184,7 @@ export const getBubbleStylesMe = (theme) => {
 
     emojiPickerStylesMe: css`
       left: auto;
-      right: calc(100% + 5px);
+      right: 0;
     `,
   };
 

packages/react/src/views/ReportMessage/MessageReportWindow.js

@@ -18,7 +18,7 @@ const MessageReportWindow = ({ messageId }) => {
       <Box css={styles.conatiner}>
         <Input
           textArea
-          placeholder="Why do you want to report this message?"
+          placeholder="Reason for reporting?"
           onChange={(e) => {
             setDescription(e.target.value);
           }}