fix(UI): make page layout able to change seamlessly (#50748)

client/package.json

@@ -112,7 +112,7 @@
     "react-monaco-editor": "0.40.0",
     "react-redux": "7.2.9",
     "react-reflex": "4.1.0",
-    "react-responsive": "6.1.2",
+    "react-responsive": "9.0.2",
     "react-scrollable-anchor": "0.6.1",
     "react-spinkit": "3.0.0",
     "react-tooltip": "4.5.1",

client/src/templates/Challenges/classic/show.tsx

@@ -4,7 +4,7 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { HandlerProps } from 'react-reflex';
-import Media from 'react-responsive';
+import { useMediaQuery } from 'react-responsive';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import store from 'store';
@@ -214,6 +214,9 @@ function ShowClassic({
   const containerRef = useRef<HTMLElement>();
   const editorRef = useRef<editor.IStandaloneCodeEditor>();
   const instructionsPanelRef = useRef<HTMLDivElement>(null);
+  const isMobile = useMediaQuery({
+    query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
+  });
 
   const blockNameTitle = `${t(
     `intro:${superBlock}.blocks.${block}.title`
@@ -422,7 +425,7 @@ function ShowClassic({
     >
       <LearnLayout hasEditableBoundaries={hasEditableBoundaries}>
         <Helmet title={windowTitle} />
-        <Media maxWidth={MAX_MOBILE_WIDTH}>
+        {isMobile && (
           <MobileLayout
             editor={renderEditor({
               isMobileLayout: true,
@@ -450,8 +453,8 @@ function ShowClassic({
             usesMultifileEditor={usesMultifileEditor}
             videoUrl={videoUrl}
           />
-        </Media>
-        <Media minWidth={MAX_MOBILE_WIDTH + 1}>
+        )}
+        {!isMobile && (
           <DesktopLayout
             challengeFiles={reduxChallengeFiles}
             challengeType={challengeType}
@@ -480,7 +483,7 @@ function ShowClassic({
             }
             windowTitle={windowTitle}
           />
-        </Media>
+        )}
         <CompletionModal />
         <HelpModal challengeTitle={title} challengeBlock={blockName} />
         <VideoModal videoUrl={videoUrl} />

pnpm-lock.yaml

@@ -675,8 +675,8 @@ importers:
         specifier: 4.1.0
         version: 4.1.0(react-dom@16.14.0)(react@16.14.0)
       react-responsive:
-        specifier: 6.1.2
-        version: 6.1.2(react@16.14.0)
+        specifier: 9.0.2
+        version: 9.0.2(react@16.14.0)
       react-scrollable-anchor:
         specifier: 0.6.1
         version: 0.6.1(react-dom@16.14.0)(react@16.14.0)
@@ -28632,16 +28632,17 @@ packages:
     resolution: {integrity: sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==}
     engines: {node: '>=0.10.0'}
 
-  /react-responsive@6.1.2(react@16.14.0):
-    resolution: {integrity: sha512-AXentVC/kN3KED9zhzJv2pu4vZ0i6cSHdTtbCScVV1MT6F5KXaG2qs5D7WLmhdaOvmiMX8UfmS4ZSO+WPwDt4g==}
-    engines: {node: '>= 0.10'}
+  /react-responsive@9.0.2(react@16.14.0):
+    resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==}
+    engines: {node: '>=0.10'}
     peerDependencies:
-      react: ^16.3.0
+      react: '>=16.8.0'
     dependencies:
       hyphenate-style-name: 1.0.4
       matchmediaquery: 0.3.1
       prop-types: 15.8.1
       react: 16.14.0
+      shallow-equal: 1.2.1
     dev: false
 
   /react-router-dom@6.14.0(react-dom@16.14.0)(react@16.14.0):
@@ -30217,6 +30218,10 @@ packages:
   /shallow-compare@1.2.2:
     resolution: {integrity: sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==}
 
+  /shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+    dev: false
+
   /shallowequal@1.1.0:
     resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
     dev: true