From 2af141a2d450946276646df00a492d0369edc3b1 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Mon, 24 Jun 2024 18:34:08 +0300
Subject: [PATCH] Web: Files: fixed the display of the owner change panel

---
 .../panels/ChangeRoomOwnerPanel/index.js      | 20 ++++++++-----------
 .../components/backdrop/Backdrop.styled.ts    |  2 +-
 packages/shared/themes/base.ts                |  2 +-
 packages/shared/themes/dark.ts                |  2 +-
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js b/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
index 16c1e0cd12..18a5a34030 100644
--- a/packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
+++ b/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(
diff --git a/packages/shared/components/backdrop/Backdrop.styled.ts b/packages/shared/components/backdrop/Backdrop.styled.ts
index 8a5354c06c..fc53887731 100644
--- a/packages/shared/components/backdrop/Backdrop.styled.ts
+++ b/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")};
diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index 26f7c2c35f..482d5e5128 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -666,7 +666,7 @@ export const getBaseTheme = () => {
           b: 38,
           a: 0.2,
         },
-        blur: 10,
+        blur: 9,
       },
 
       content: {
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index 0ed9cc7567..9cc4828424 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -637,7 +637,7 @@ const Dark: TTheme = {
         b: 27,
         a: 0.4,
       },
-      blur: 10,
+      blur: 9,
     },
 
     content: {