Switch to common building of monorepo packages in deploy.yml

.github/workflows/deploy.yml

@@ -30,19 +30,10 @@ jobs:
           node-version: "16.19.0"
 
       - name: Install Dependencies
-        run: yarn
-
-      - name: Build Storybook
-        run: yarn build:storybook
-        working-directory: packages/react
-
-      - name: Build UI-Elements
-        run: yarn build:storybook
-        working-directory: packages/ui-elements
+        run: yarn install
 
-      - name: Build Layout Editor
-        run: npm run build
-        working-directory: packages/layout_editor
+      - name: Build Packages
+        run: yarn build && yarn build:storybook
 
       - name: Setup Node.js for Docs
         uses: actions/setup-node@v4

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,

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`

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)} />

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,

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;
+      }
     `,
   };