Fix: #138 - Implement mobile responsiveness for the tour page UI.

Author: Me-Priyank

app/mobile/page.module.css

@@ -1,4 +1,4 @@
-.main {
+/* .main {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -9,4 +9,4 @@
 
 .message {
   font-weight: 500;
-}
+} */

app/mobile/page.tsx

@@ -1,25 +1,25 @@
-"use client";
+// "use client";
 
-import React, { useEffect } from "react";
-import styles from "./page.module.css";
-import classnames from "classnames";
-import { outfitFont } from "../styles/fonts";
+// import React, { useEffect } from "react";
+// import styles from "./page.module.css";
+// import classnames from "classnames";
+// import { outfitFont } from "../styles/fonts";
 
-export default function Mobile() {
-  useEffect(() => {
-    // if not on mobile, redirect to the main page
-    if (window.innerWidth > 768) {
-      window.location.href = "/";
-    }
-  }, []);
-  return (
-    <div className={styles.main}>
-      <div className={classnames(styles.message, outfitFont.className)}>
-        We are sorry,
-        <br />
-        Tour of JSON Schema is not optimized for mobile devices. Please use a
-        desktop computer for the best experience.
-      </div>
-    </div>
-  );
-}
+// export default function Mobile() {
+//   useEffect(() => {
+//     // if not on mobile, redirect to the main page
+//     if (window.innerWidth > 768) {
+//       window.location.href = "/";
+//     }
+//   }, []);
+//   return (
+//     <div className={styles.main}>
+//       <div className={classnames(styles.message, outfitFont.className)}>
+//         We are sorry,
+//         <br />
+//         Tour of JSON Schema is not optimized for mobile devices. Please use a
+//         desktop computer for the best experience.
+//       </div>
+//     </div>
+//   );
+// }

app/providers.tsx

@@ -1,14 +1,56 @@
 "use client";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./styles/theme";
-import { useEffect } from "react";
+import styles from "./styles/page.module.css";
+import classnames from "classnames";
+
+import { useEffect, useState } from "react";
+import { outfitFont } from "./styles/fonts";
+
+const MOBILE_BREAKPOINT = 768;
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  // useEffect(() => {
-  //   if (window.innerWidth < 768 && !window.location.href.includes("/mobile")) {
-  //     window.location.href = "/mobile";
-  //   }
-  // }, []);
-
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
-}
+  // 1. Initialize state for mobile status
+  const [isMobile, setIsMobile] = useState(false);
+  const [hasChecked, setHasChecked] = useState(false);
+
+  useEffect(() => {
+    // 2. Function to check the screen width
+    const checkMobileStatus = () => {
+      setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+      setHasChecked(true);
+    };
+
+    checkMobileStatus();
+
+
+    window.addEventListener('resize', checkMobileStatus);
+
+    return () => {
+      window.removeEventListener('resize', checkMobileStatus);
+    };
+  }, []);
+
+  if (!hasChecked) {
+    return null;
+  }
+
+  if (!isMobile) {
+    return (
+      <ChakraProvider theme={theme}>
+        {children}
+      </ChakraProvider>
+    );
+  }
+
+  return (
+    <div className={styles.main}>
+      <div className={classnames(styles.message, outfitFont.className)}>
+        We are sorry,
+        <br /> 
+        Tour of JSON Schema is not optimized for mobile devices. Please use a
+        desktop computer for the best experience.
+      </div>
+    </div>
+  );
+}

app/styles/page.module.css

@@ -1,9 +1,10 @@
 .main {
   display: flex;
   flex-direction: column;
-  height: inherit;
-
+  justify-content: center;
   align-items: center;
+  height: 100%;
+  padding-inline: 12px;
 }
 
 .wrapper {
@@ -86,3 +87,7 @@
 .footerText {
   font-weight: 700;
 }
+
+.message {
+  font-weight: 500;
+}