Fixed sidebar height issue

RocketChat · Oct 7, 2024 · 67ac114 · 67ac114
1 parent 6d34acc
commit 67ac114
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 85 deletions.
diff --git a/packages/react/src/views/GlobalStyles.js b/packages/react/src/views/GlobalStyles.js
@@ -8,7 +8,6 @@ const getGlobalStyles = (theme) => css`
     margin: 0;
     padding: 0;
   }
-
   .ec-embedded-chat body {
     font-family: ${theme.typography.default.fontFamily};
     font-size: ${theme.typography.default.fontSize}px;
@@ -36,6 +35,35 @@ const getGlobalStyles = (theme) => css`
   .ec-embedded-chat ::-webkit-scrollbar-button {
     display: none;
   }
+
+  @media (max-width: 780px) {
+    .ec-sidebar {
+      position: absolute;
+      width: 100% !important;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      background: ${theme.colors.background}!important;
+    }
+
+    @media (max-height: 430px) {
+      .ec-sidebar {
+        height: 80vh !important;
+      }
+    }
+
+    @media (max-height: 712px) and (min-height: 430px) {
+      .ec-sidebar {
+        height: 86vh !important;
+      }
+    }
+
+    @media (min-height: 712px) {
+      .ec-sidebar {
+        height: 89vh !important;
+      }
+    }
+  }
 `;
 
 const GlobalStyles = () => {

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { isSameDay, format, set } from 'date-fns';
+import React, { useState } from 'react';
+import { isSameDay, format } from 'date-fns';
 import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements';
 import { MessageDivider } from '../../Message/MessageDivider';
 import Message from '../../Message/Message';
@@ -41,22 +41,14 @@ export const MessageAggregator = ({
 
   const noMessages = messageList?.length === 0 || !messageRendered;
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  useEffect(() => {
-    setIsSmallScreen(window.innerWidth < 780);
-  }, []);
+
   return (
     <ViewComponent
       title={title}
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{
-        ...(isSmallScreen && viewType === 'Sidebar'
-          ? styles.sidebarStyles
-          : null),
-        backgroundColor: theme.colors.background,
-      }}
+      style={{ zIndex: 1 }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-const getMessageAggregatorStyles = (theme) => {
+const getMessageAggregatorStyles = () => {
   const styles = {
     listContainerStyles: css`
       flex: 1;
@@ -9,7 +9,6 @@ const getMessageAggregatorStyles = (theme) => {
       justify-content: initial;
       align-items: initial;
       max-width: 100%;
-      overflow-y: auto;
     `,
 
     noMessageStyles: css`
@@ -22,15 +21,6 @@ const getMessageAggregatorStyles = (theme) => {
       flex-direction: column;
       align-items: center;
     `,
-    sidebarStyles: {
-      position: 'absolute',
-      left: '0',
-      bottom: '0',
-      top: '2',
-      width: '100%',
-      height: '93%',
-      zIndex: 1,
-    },
   };
 
   return styles;

diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -1,22 +1,19 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import {
   Box,
   Avatar,
   Sidebar,
   Popup,
   useComponentOverrides,
-  useTheme,
 } from '@embeddedchat/ui-elements';
-import { getRoomInformationStyles } from './RoomInformation.styles';
 import RCContext from '../../context/RCInstance';
 import { useChannelStore } from '../../store';
 import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const Roominfo = () => {
   const { RCInstance } = useContext(RCContext);
-  const { theme } = useTheme();
-  const styles = getRoomInformationStyles(theme);
+
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
@@ -27,21 +24,13 @@ const Roominfo = () => {
   };
 
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  useEffect(() => {
-    setIsSmallScreen(window.innerWidth < 780);
-  }, []);
+
   return (
     <ViewComponent
       title="Room Information"
       iconName="info"
       onClose={() => setExclusiveState(null)}
-      style={{
-        ...(isSmallScreen && viewType === 'Sidebar'
-          ? styles.sidebarStyles
-          : null),
-        backgroundColor: theme.colors.background,
-      }}
+      style={{ zIndex: 1 }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

diff --git a/packages/react/src/views/RoomInformation/RoomInformation.styles.js b/packages/react/src/views/RoomInformation/RoomInformation.styles.js
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -50,21 +50,12 @@ const RoomMembers = ({ members }) => {
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  useEffect(() => {
-    setIsSmallScreen(window.innerWidth < 780);
-  }, []);
   return (
     <ViewComponent
       title="Members"
       iconName="members"
       onClose={() => setExclusiveState(null)}
-      style={{
-        ...(isSmallScreen && viewType === 'Sidebar'
-          ? styles.containerStyles
-          : null),
-        backgroundColor: theme.colors.background,
-      }}
+      style={{ zIndex: 1 }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -74,7 +65,7 @@ const RoomMembers = ({ members }) => {
       {isLoading ? (
         <LoadingIndicator />
       ) : (
-        <Box css={styles.memberListStyles}>
+        <Box css={styles.container}>
           {showInvite ? (
             <InviteMembers />
           ) : (
@@ -85,7 +76,7 @@ const RoomMembers = ({ members }) => {
 
               {isAdmin && (
                 <Button
-                  style={styles.inviteButtonStyles}
+                  style={{ marginTop: '10px', width: '100%' }}
                   onClick={async () => {
                     toggleInviteView();
                   }}

diff --git a/packages/react/src/views/RoomMembers/RoomMembers.styles.js b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
@@ -2,30 +2,14 @@ import { css } from '@emotion/react';
 
 export const getRoomMemberStyles = () => {
   const styles = {
-    inviteButtonStyles: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: '1rem 1rem 1rem 1rem',
-      width: '100%',
-    },
-    memberListStyles: css`
-      padding: 0 1rem 1rem;
+    container: css`
       display: flex;
       flex-direction: column;
+      overflow: auto;
       width: 100%;
-      height: 100%;
-      overflow-y: auto;
+      justify-content: center;
+      padding: 0 1rem 1rem;
     `,
-    containerStyles: {
-      position: 'absolute',
-      left: '0',
-      bottom: '0',
-      top: '60px',
-      width: '100%',
-      height: 'auto',
-      zIndex: 1,
-    },
   };
 
   return styles;