Adjusted the sidebar width to cover the entire width for small screens (

#630) * Adjusted the sidebar width to cover the entire width for small screen size * Transferred the styles to styles.js files * Fixed Linting Issue --------- Co-authored-by: Zishan Ahmad <[email protected]>
RocketChat · Sep 30, 2024 · 0aafed8 · 0aafed8
1 parent df7f1b4
commit 0aafed8
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -41,14 +41,18 @@ export const MessageAggregator = ({
 
   const noMessages = messageList?.length === 0 || !messageRendered;
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-
   return (
     <ViewComponent
       title={title}
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{ padding: 0 }}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(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
@@ -8,7 +8,10 @@ const getMessageAggregatorStyles = () => {
       flex-direction: column;
       justify-content: initial;
       align-items: initial;
-      max-width: 100%;
+      width: 300px;
+      @media (max-width: 780px) {
+        width: 100vw;
+      }
     `,
 
     noMessageStyles: css`

diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -6,6 +6,7 @@ import {
   Sidebar,
   Popup,
   useComponentOverrides,
+  useTheme,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { useChannelStore } from '../../store';
@@ -23,13 +24,20 @@ const Roominfo = () => {
     return `${host}/avatar/${channelname}`;
   };
 
+  const { theme } = useTheme();
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
   return (
     <ViewComponent
       title="Room Information"
       iconName="info"
       onClose={() => setExclusiveState(null)}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -41,6 +49,9 @@ const Roominfo = () => {
           padding: 0 1rem 1rem;
           margin: 0 auto;
           overflow: auto;
+          @media (max-width: 780px) {
+            width: 100vw;
+          }
         `}
       >
         <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />

diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -23,16 +23,13 @@ const RoomMembers = ({ members }) => {
   const { host } = ECOptions;
   const { theme } = useTheme();
   const styles = getRoomMemberStyles(theme);
-
   const toggleInviteView = useInviteStore((state) => state.toggleInviteView);
   const showInvite = useInviteStore((state) => state.showInvite);
   const [isLoading, setIsLoading] = useState(true);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
-
   const [userInfo, setUserInfo] = useState(null);
   const setExclusiveState = useSetExclusiveState();
-
   useEffect(() => {
     const getUserInfo = async () => {
       try {
@@ -50,11 +47,18 @@ const RoomMembers = ({ members }) => {
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
+
   return (
     <ViewComponent
       title="Members"
       iconName="members"
       onClose={() => setExclusiveState(null)}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,

diff --git a/packages/react/src/views/RoomMembers/RoomMembers.styles.js b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
@@ -6,9 +6,12 @@ export const getRoomMemberStyles = () => {
       display: flex;
       flex-direction: column;
       overflow: auto;
-      width: 100%;
       justify-content: center;
-      padding: 0 1rem 1rem;
+      padding: 0 2rem 1rem;
+      width: 300px;
+      @media (max-width: 780px) {
+        width: 100vw;
+      }
     `,
   };