Fixed UI issues for Sidebar (#634)

* Fixed UI issues for Sidebar

* Fixed sidebar height issue

* Removed unnecessary spacing

* Fixed reply in thread issue

* Adjusted dynamic header visibility

* Revert zIndex changes

* Linting fix

* Run prettier

* Remove zIndex

* Adjusted zIndex for ViewComponent

* Fix sidebar width

* Remove global css for sidebar

---------

Co-authored-by: Zishan Ahmad <[email protected]>

Author: abirc8010

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,17 @@ const getGlobalStyles = (theme) => css`
   .ec-embedded-chat ::-webkit-scrollbar-button {
     display: none;
   }
+  @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,11 @@ export const MessageAggregator = ({
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{ padding: 0 }}
+      style={{
+        width: '400px',
+        padding: 0,
+        zIndex: window.innerWidth <= 780 ? 1 : null,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -126,6 +130,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={{ width: '400px', 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={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,