Client:PortalSettings:Common Fixed customization

packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js

@@ -34,7 +34,7 @@ import { Button } from "@docspace/shared/components/button";
 import { inject, observer } from "mobx-react";
 
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "@docspace/shared/utils";
+import { isMobileDevice } from "@docspace/shared/utils";
 import checkScrollSettingsBlock from "../utils";
 import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
@@ -167,7 +167,7 @@ const DNSSettings = (props) => {
     setDNSName(value);
   };
   const checkInnerWidth = useCallback(() => {
-    if (!isMobile()) {
+    if (!isMobileDevice()) {
       setIsCustomizationView(true);
 
       const currentUrl = window.location.href.replace(
@@ -183,7 +183,7 @@ const DNSSettings = (props) => {
     } else {
       setIsCustomizationView(false);
     }
-  }, [isMobile, setIsCustomizationView]);
+  }, [isMobileDevice, setIsCustomizationView]);
 
   const domainExampleText = " ourcompany.com";
 

packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js

@@ -38,7 +38,7 @@ import { COOKIE_EXPIRATION_YEAR } from "@docspace/shared/constants";
 import { LANGUAGE } from "@docspace/shared/constants";
 import { setCookie } from "@docspace/shared/utils/cookie";
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "@docspace/shared/utils";
+import { isMobileDevice } from "@docspace/shared/utils";
 import checkScrollSettingsBlock from "../utils";
 import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
 import LoaderCustomization from "../sub-components/loaderCustomization";
@@ -97,10 +97,10 @@ const LanguageAndTimeZone = (props) => {
     initSettings,
     isLoadedPage,
     currentColorScheme,
-    currentDeviceType,
+    deviceType,
   } = props;
 
-  const isMobileView = currentDeviceType === DeviceType.mobile;
+  const isMobileView = deviceType === DeviceType.mobile;
 
   const navigate = useNavigate();
 
@@ -418,7 +418,7 @@ const LanguageAndTimeZone = (props) => {
   };
 
   const checkInnerWidth = () => {
-    if (!isMobile()) {
+    if (!isMobileDevice()) {
       setState((val) => ({ ...val, isCustomizationView: true }));
 
       const currentUrl = window.location.href.replace(
@@ -565,7 +565,7 @@ export default inject(({ settingsStore, setup, common, userStore }) => {
     cultures,
     currentColorScheme,
     languageAndTimeZoneSettingsUrl,
-    currentDeviceType,
+    deviceType,
   } = settingsStore;
 
   const { user } = userStore;
@@ -589,7 +589,7 @@ export default inject(({ settingsStore, setup, common, userStore }) => {
     setIsLoaded,
     currentColorScheme,
     languageAndTimeZoneSettingsUrl,
-    currentDeviceType,
+    deviceType,
   };
 })(
   withCultureNames(

packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js

@@ -32,7 +32,7 @@ import { TextInput } from "@docspace/shared/components/text-input";
 import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
 import { inject, observer } from "mobx-react";
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "@docspace/shared/utils";
+import { isMobileDevice } from "@docspace/shared/utils";
 import checkScrollSettingsBlock from "../utils";
 import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
@@ -264,7 +264,7 @@ const PortalRenaming = (props) => {
   };
 
   const checkInnerWidth = useCallback(() => {
-    if (!isMobile()) {
+    if (!isMobileDevice()) {
       setIsCustomizationView(true);
 
       const currentUrl = window.location.href.replace(
@@ -279,7 +279,7 @@ const PortalRenaming = (props) => {
     } else {
       setIsCustomizationView(false);
     }
-  }, [isMobile, setIsCustomizationView]);
+  }, [isMobileDevice, setIsCustomizationView]);
 
   const onOpenModal = () => {
     setIsShowModal(true);

packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js

@@ -35,7 +35,7 @@ import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { inject, observer } from "mobx-react";
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "@docspace/shared/utils";
+import { isMobileDevice } from "@docspace/shared/utils";
 import checkScrollSettingsBlock from "../utils";
 import { StyledSettingsComponent } from "./StyledSettings";
 import LoaderCustomization from "../sub-components/loaderCustomization";
@@ -283,7 +283,7 @@ const WelcomePageSettings = (props) => {
   };
 
   const checkInnerWidth = () => {
-    if (!isMobile()) {
+    if (!isMobileDevice()) {
       setState((val) => ({ ...val, isCustomizationView: true }));
 
       const currentUrl = window.location.href.replace(

packages/shared/utils/device.ts

@@ -48,8 +48,19 @@ export const transitionalScreenSize = `(max-width: ${
   size.desktop + INFO_PANEL_WIDTH
 }px)`;
 
-export const isMobile = () => {
-  return window.innerWidth <= size.mobile;
+export const isMobile = (width?: number) => {
+  return (width ?? window.innerWidth) <= size.mobile;
+};
+
+export const isMobileDevice = () => {
+  const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
+  const width = Math.abs(
+    Math.round(
+      Math.sin(angleByRadians) * window.innerHeight +
+        Math.cos(angleByRadians) * window.innerWidth,
+    ),
+  );
+  return isMobile(width);
 };
 
 export const isTablet = (width?: number) => {

packages/shared/utils/index.ts

@@ -56,6 +56,7 @@ import {
   isTouchDevice,
   checkIsSSR,
   INFO_PANEL_WIDTH,
+  isMobileDevice,
 } from "./device";
 import { getCookie } from "./cookie";
 import { Context, Provider, Consumer } from "./context";
@@ -124,6 +125,7 @@ export {
   DomHelpers,
   ObjectUtils,
   getLogoUrl,
+  isMobileDevice,
 };
 
 export const getModalType = () => {