Web: Files: fixed the display of the owner change panel

packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js

@@ -32,13 +32,17 @@ import { Backdrop } from "@docspace/shared/components/backdrop";
 import PeopleSelector from "@docspace/shared/selectors/People";
 import { withTranslation } from "react-i18next";
 import Filter from "@docspace/shared/api/people/filter";
-import { EmployeeType, DeviceType } from "@docspace/shared/enums";
+import { EmployeeType } from "@docspace/shared/enums";
 import { Portal } from "@docspace/shared/components/portal";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
 
 const StyledChangeRoomOwner = styled.div`
   display: contents;
 
+  .change-owner_people-selector {
+    overflow: visible;
+  }
+
   ${({ showBackButton }) =>
     !showBackButton &&
     css`
@@ -93,12 +97,7 @@ const ChangeRoomOwner = (props) => {
     if (e.keyCode === 13 || e.which === 13) onChangeRoomOwner();
   };
 
-  const onChangeRoomOwner = async (
-    user,
-    selectedAccess,
-    newFooterInputValue,
-    isChecked,
-  ) => {
+  const onChangeRoomOwner = async (user, isChecked) => {
     if (showBackButton) {
       setRoomParams && setRoomParams(user[0]);
     } else {
@@ -164,16 +163,13 @@ const ChangeRoomOwner = (props) => {
           emptyScreenDescription={t("CreateEditRoomDialog:PeopleSelectorInfo", {
             productName: PRODUCT_NAME,
           })}
+          className="change-owner_people-selector"
         />
       </Aside>
     </StyledChangeRoomOwner>
   );
 
-  return currentDeviceType === DeviceType.mobile ? (
-    <Portal visible={visible} element={asideComponent} />
-  ) : (
-    asideComponent
-  );
+  return <Portal visible={visible} element={asideComponent} />;
 };
 
 export default inject(

packages/shared/components/backdrop/Backdrop.styled.ts

@@ -36,7 +36,7 @@ const StyledBackdrop = styled.div<BackdropProps & { needBackground: boolean }>`
   ${(props) =>
     props.needBackground &&
     css`
-      backdrop-filter: blur(3px);
+      backdrop-filter: ${`blur(${props.theme.modalDialog.backdrop.blur}px)`};
     `};
 
   display: ${(props) => (props.visible ? "block" : "none")};

packages/shared/themes/base.ts

@@ -666,7 +666,7 @@ export const getBaseTheme = () => {
           b: 38,
           a: 0.2,
         },
-        blur: 10,
+        blur: 9,
       },
 
       content: {

packages/shared/themes/dark.ts

@@ -637,7 +637,7 @@ const Dark: TTheme = {
         b: 27,
         a: 0.4,
       },
-      blur: 10,
+      blur: 9,
     },
 
     content: {