Merge pull request #2833 from GreenAsJade/restore_rdh_on_phones

Restore dynamic help for mobile (with layout fix)

package.json

@@ -136,7 +136,7 @@
         "react-datetime": "^3.0.4",
         "react-dom": "^18.2.0",
         "react-dropzone": "^12.0.5",
-        "react-dynamic-help": "^3.0.1",
+        "react-dynamic-help": "^3.1.2",
         "react-linkify": "^1.0.0-alpha",
         "react-router-dom": "=6.3.0",
         "react-select": "^5.0.1",

src/components/OgsHelpProvider/OgsHelpProvider.tsx

@@ -24,7 +24,7 @@ import * as data from "@/lib/data";
 
 import { HelpProvider, HelpPopupDictionary } from "react-dynamic-help";
 import * as DynamicHelp from "react-dynamic-help";
-import { useIsDesktop, useUser } from "@/lib/hooks";
+import { useUser } from "@/lib/hooks";
 
 const helpPopupDictionary: HelpPopupDictionary = {
     "Skip this topic": pgettext("A button to dismiss a help popup topic", "Skip this topic"),
@@ -40,9 +40,6 @@ type OgsHelpProviderProps = {
  */
 
 export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
-    // RDH needs work to support mobile layouts
-    const isDesktop = useIsDesktop();
-
     const [storageLoaded, setStorageLoaded] = React.useState(false);
 
     const debugDynamicHelp = data.get("debug-dynamic-help", false);
@@ -86,7 +83,7 @@ export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
         <HelpProvider
             dictionary={helpPopupDictionary}
             storageApi={dynamicHelpStorage}
-            storageReady={storageLoaded && isDesktop} // hack to turn it off for mobile
+            storageReady={storageLoaded}
             debug={debugDynamicHelp}
         >
             {props.children}

src/views/HelpFlows/HelpFlows.styl

@@ -26,14 +26,12 @@
     font-size: 1.0rem;
     box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(0,0,0,0.2);
 
-    // Don't try to position RDH popups near the target on a phone
-    // Instead, put them at the bottom of the screen.
+    // On the phone, make sure the items will be visible even if it means
+    // that they appear over their target (they will be dismissed anyhow).
     @media only screen and (max-width 800px) {
-        bottom: 0 !important;
         left: 0 !important;
         right: auto !important;
-        top: auto !important;
-    }
+        }
 }
 
 .rdh-help-item>.rdh-popup-dismissers {

yarn.lock

@@ -9181,10 +9181,10 @@ react-dropzone@^12.0.5:
     file-selector "^0.5.0"
     prop-types "^15.8.1"
 
-react-dynamic-help@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/react-dynamic-help/-/react-dynamic-help-3.0.1.tgz#e1df13afb3aa570e12ce6518ff764a05ef0fd1f2"
-  integrity sha512-eZ53H0SQuX5oiatXWy+dKsMVlMGxIlDxk06CPnr2oLdAY3cCZd8ztUhpNwsWfM9GtpeZAIxsBeTiwlXyFRutug==
+react-dynamic-help@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-dynamic-help/-/react-dynamic-help-3.1.2.tgz#60d5471ab6b93cbf75df6620d2a729ccab40566b"
+  integrity sha512-oVxyg4Lo/UPUYyc5MTqGoFvrGYY3ZxrUdgMfmK3PY7z5voHR9EJ9IAptCHkh9rWEtdpmeSpvS+jgvxxF9KkInQ==
 
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"