Fixed UI issues for Sidebar

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -21,6 +21,7 @@ import {
   usePinnedMessageStore,
   useStarredMessageStore,
   useFileStore,
+  useSidebarStore,
 } from '../../store';
 import { DynamicHeader } from '../DynamicHeader';
 import useFetchChatData from '../../hooks/useFetchChatData';
@@ -84,7 +85,7 @@ const ChatHeader = ({
   const setIsUserAuthenticated = useUserStore(
     (state) => state.setIsUserAuthenticated
   );
-
+  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
   const dispatchToastMessage = useToastBarDispatch();
   const { getMessagesAndRoles } = useFetchChatData(showRoles);
   const setMessageLimit = useSettingsStore((state) => state.setMessageLimit);
@@ -130,6 +131,7 @@ const ChatHeader = ({
     try {
       await RCInstance.logout();
       setMessages([]);
+      setShowSidebar(false);
       setUserAvatarUrl(null);
       useMessageStore.setState({ isMessageLoaded: false });
     } catch (e) {

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,20 @@ const getGlobalStyles = (theme) => css`
   .ec-embedded-chat ::-webkit-scrollbar-button {
     display: none;
   }
+  .ec-sidebar {
+    width: 400px;
+  }
+  @media (max-width: 780px) {
+    .ec-sidebar {
+      position: absolute;
+      width: 100% !important;
+      height: calc(100% - 56.39px) !important;
+      min-width: 250px !important;
+      left: 0;
+      bottom: 0;
+      background: ${theme.colors.background}!important;
+    }
+  }
 `;
 
 const GlobalStyles = () => {

packages/react/src/views/Message/Message.js

@@ -11,7 +11,7 @@ import {
 import { Attachments } from '../AttachmentHandler';
 import { Markdown } from '../Markdown';
 import MessageHeader from './MessageHeader';
-import { useMessageStore, useUserStore } from '../../store';
+import { useMessageStore, useUserStore, useSidebarStore } from '../../store';
 import RCContext from '../../context/RCInstance';
 import { MessageBody } from './MessageBody';
 import { MessageReactions } from './MessageReactions';
@@ -49,7 +49,7 @@ const Message = ({
 
   const { RCInstance, ECOptions } = useContext(RCContext);
   showAvatar = ECOptions?.showAvatar && showAvatar;
-
+  const { showSidebar, setShowSidebar } = useSidebarStore();
   const authenticatedUserId = useUserStore((state) => state.userId);
   const authenticatedUserUsername = useUserStore((state) => state.username);
   const userRoles = useUserStore((state) => state.roles);
@@ -137,6 +137,7 @@ const Message = ({
 
   const handleOpenThread = (msg) => async () => {
     openThread(msg);
+    setShowSidebar(false);
   };
 
   const isStarred = message.starred?.find((u) => u._id === authenticatedUserId);

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

@@ -81,6 +81,9 @@ export const getMessageDividerStyles = (theme) => {
       margin-bottom: 0.75rem;
       padding-left: 1.25rem;
       padding-right: 1.25rem;
+      @media (max-width: 780px) {
+        z-index: 1;
+      }
     `,
 
     dividerContent: css`

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -70,7 +70,7 @@ export const MessageAggregator = ({
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{ padding: 0 }}
+      style={{ padding: 0, zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -126,6 +126,9 @@ export const MessageAggregator = ({
                       isInSidebar
                       style={{
                         flex: 1,
+                        paddingLeft: 3,
+                        paddingRight: 2,
+                        minWidth: 0,
                       }}
                     />
 

packages/react/src/views/RoomInformation/RoomInformation.js

@@ -30,6 +30,7 @@ const Roominfo = () => {
       title="Room Information"
       iconName="info"
       onClose={() => setExclusiveState(null)}
+      style={{ zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

packages/react/src/views/RoomMembers/RoomMember.js

@@ -55,6 +55,7 @@ const RoomMembers = ({ members }) => {
       title="Members"
       iconName="members"
       onClose={() => setExclusiveState(null)}
+      style={{ zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,