Fix Bug 62348: Settings are not available when splitting the screen

packages/client/src/components/BreakpointWarning/BreakpointWarning.js

@@ -6,25 +6,38 @@ import StyledBreakpointWarning from "./sub-components/StyledBreakpointWarning";
 import Loader from "./sub-components/loader";
 import { inject, observer } from "mobx-react";
 
-const BreakpointWarning = ({ t, sectionName, tReady, theme }) => {
-  return !tReady ? (
-    <Loader />
-  ) : (
-    <StyledBreakpointWarning>
-      <img
-        src={
-          theme.isBase ? BreakpointWarningSvgUrl : BreakpointWarningSvgDarkUrl
-        }
-      />
+const BreakpointWarning = ({
+  t,
+  sectionName,
+  tReady,
+  theme,
+  isSmallWindow,
+}) => {
+  const textHeader = isSmallWindow
+    ? t("BreakpointSmallText")
+    : t("BreakpointWarningText");
 
-      <div className="description">
-        <div className="text-breakpoint">{t("BreakpointWarningText")}</div>
-        <div className="text-prompt">
+  const textPrompt = isSmallWindow ? (
+    t("BreakpointSmallTextPrompt")
+  ) : (
     <Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
       "Please use the desktop site to access the {{ sectionName }}
       settings."
     </Trans>
-        </div>
+  );
+
+  const img = theme.isBase
+    ? BreakpointWarningSvgUrl
+    : BreakpointWarningSvgDarkUrl;
+
+  return !tReady ? (
+    <Loader />
+  ) : (
+    <StyledBreakpointWarning>
+      <img src={img} />
+      <div className="description">
+        <div className="text-breakpoint">{textHeader}</div>
+        <div className="text-prompt">{textPrompt}</div>
       </div>
     </StyledBreakpointWarning>
   );

packages/client/src/pages/PortalSettings/categories/common/branding.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
 
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
+import { isMobile, isDesktop } from "react-device-detect";
 
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import Whitelabel from "./Branding/whitelabel";
@@ -60,7 +60,7 @@ const Branding = ({
   isSettingPaid,
   standalone,
 }) => {
-  const [viewDesktop, setViewDesktop] = useState(false);
+  const [isSmallWindow, setIsSmallWindow] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -78,14 +78,19 @@ const Branding = ({
   }, []);
 
   const onCheckView = () => {
-    if (!isMobile && window.innerWidth > 1024) {
-      setViewDesktop(true);
+    if (isDesktop && window.innerWidth < 795) {
+      setIsSmallWindow(true);
     } else {
-      setViewDesktop(false);
+      setIsSmallWindow(false);
     }
   };
 
-  if (!viewDesktop)
+  if (isSmallWindow)
+    return (
+      <BreakpointWarning sectionName={t("Settings:Branding")} isSmallWindow />
+    );
+
+  if (isMobile)
     return <BreakpointWarning sectionName={t("Settings:Branding")} />;
 
   return (