Client: RoomLogoCoverDialog: fixed tablet style

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

@@ -31,6 +31,7 @@ import {
   ModalDialog,
   ModalDialogType,
 } from "@docspace/shared/components/modal-dialog";
+import { mobile, tablet } from "@docspace/shared/utils";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import RoomLogoCover from "./sub-components/RoomLogoCover";
 
@@ -39,6 +40,14 @@ const StyledModalDialog = styled(ModalDialog)`
     width: 422px;
     min-height: 648px;
 
+    @media ${tablet} {
+      width: 464px;
+    }
+
+    @media ${mobile} {
+      width: 100vw;
+    }
+
     .modal-body {
       padding: 0;
       padding-left: 14px;

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

@@ -28,6 +28,7 @@ import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
+import { mobile, tablet } from "@docspace/shared/utils";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 import { CustomLogo } from "./CustomLogo";
@@ -59,16 +60,26 @@ const RoomLogoCoverContainer = styled.div`
     font-size: 13px;
     line-height: 20px;
   }
+  .colors-container {
+    flex-wrap: nowrap;
+  }
 
   .colors-container,
   .cover-icon-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
+
+    @media ${tablet} {
+      flex-wrap: wrap;
+      gap: 16px;
+    }
   }
 
-  .colors-container {
-    flex-wrap: nowrap;
+  .cover-icon-container {
+    @media ${mobile} {
+      padding-left: 10px;
+    }
   }
 
   .select-color-container {

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

@@ -26,6 +26,8 @@
 
 import React, { useState, useRef } from "react";
 import styled, { css } from "styled-components";
+
+import { mobile, tablet } from "@docspace/shared/utils";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import PlusSvgUrl from "PUBLIC_DIR/images/icons/16/button.plus.react.svg?url";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
@@ -45,6 +47,11 @@ const StyledColorItem = styled.div<ColorItemProps>`
   border-radius: 50%;
   background-color: ${(props) => props.color};
 
+  @media ${tablet} {
+    width: 40px;
+    height: 40px;
+  }
+
   ${(props) =>
     props.isEmptyColor &&
     css`
@@ -74,11 +81,21 @@ const SelectedColorItem = styled.div`
   align-items: center;
   justify-content: center;
 
+  @media ${tablet} {
+    width: 36px;
+    height: 36px;
+  }
+
   .circle {
     width: 20px;
     height: 20px;
     background-color: ${(props) => props.color};
     border-radius: 50%;
+
+    @media ${tablet} {
+      width: 28px;
+      height: 28px;
+    }
   }
 `;
 
@@ -130,7 +147,7 @@ export const SelectColor = ({
           />
         </StyledColorItem>
         <DropDown
-          directionX="right"
+          directionX="both"
           forwardedRef={iconRef}
           withBackdrop={false}
           isDefaultMode

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

@@ -27,6 +27,7 @@
 import React from "react";
 
 import styled, { css } from "styled-components";
+import { mobile, tablet } from "@docspace/shared/utils";
 
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 import { SelectIconProps } from "../RoomLogoCoverDialog.types";
@@ -69,6 +70,11 @@ const StyledIconContainer = styled.div`
   justify-content: center;
   width: 30px;
   height: 30px;
+
+  @media ${tablet} {
+    width: 40px;
+    height: 40px;
+  }
   border-radius: 4px;
   &:hover {
     cursor: pointer;