Client: RoomLogoCoverDialog: fixed scrollbar in mobile

packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx

@@ -31,7 +31,7 @@ import {
   ModalDialog,
   ModalDialogType,
 } from "@docspace/shared/components/modal-dialog";
-import { mobile, tablet } from "@docspace/shared/utils";
+import { mobile, tablet, isMobile } from "@docspace/shared/utils";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import RoomLogoCover from "./sub-components/RoomLogoCover";
 
@@ -44,14 +44,17 @@ const StyledModalDialog = styled(ModalDialog)`
       width: 464px;
     }
 
-    @media ${mobile} {
-      width: 100vw;
-    }
-
     .modal-body {
       padding: 0;
       padding-left: 14px;
     }
+
+    @media ${mobile} {
+      width: 100vw;
+      .modal-body {
+        padding: 0px 16px 8px;
+      }
+    }
   }
 `;
 
@@ -62,7 +65,8 @@ const RoomLogoCoverDialog = () => {
       visible
       autoMaxHeight
       // onClose={onClose}
-      displayType={ModalDialogType.modal}
+      displayType={isMobile() ? ModalDialogType.aside : ModalDialogType.modal}
+      withBodyScroll
     >
       <ModalDialog.Header>{t("RoomCover")}</ModalDialog.Header>
       <ModalDialog.Body>

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx

@@ -28,11 +28,11 @@ import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
-import { mobile, tablet } from "@docspace/shared/utils";
+import { mobile, tablet, isMobile } from "@docspace/shared/utils";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 import { CustomLogo } from "./CustomLogo";
-import { SelectColor } from "./SelectColor";
+import { SelectColor } from "./SelectColor/SelectColor";
 import { SelectIcon } from "./SelectIcon";
 
 const logoColors = [
@@ -96,12 +96,8 @@ const RoomLogoCover = (props) => {
 
   const scrollRef = useRef(null);
 
-  return (
-    <RoomLogoCoverContainer>
-      <div className="room-logo-container">
-        <CustomLogo icon={icon} color={color} withoutIcon={withoutIcon} />
-      </div>
-      <Scrollbar style={{ height: "400px" }} ref={scrollRef}>
+  const selectContainerBody = (
+    <>
       <div className="color-select-container">
         <SelectColor
           t={t}
@@ -118,7 +114,23 @@ const RoomLogoCover = (props) => {
           setWithoutIcon={setWithoutIcon}
         />
       </div>
+    </>
+  );
+
+  return (
+    <RoomLogoCoverContainer>
+      <div className="room-logo-container">
+        <CustomLogo icon={icon} color={color} withoutIcon={withoutIcon} />
+      </div>
+      <div className="select-container">
+        {isMobile() ? (
+          selectContainerBody
+        ) : (
+          <Scrollbar ref={scrollRef} style={{ height: "400px" }}>
+            {selectContainerBody}
           </Scrollbar>
+        )}
+      </div>
     </RoomLogoCoverContainer>
   );
 };