From b6a56036b04cceef4de9ceba85314ecbbb5e8bc0 Mon Sep 17 00:00:00 2001
From: Sourya07 <singhsourya137@gmail.com>
Date: Fri, 22 May 2026 17:44:21 +0530
Subject: [PATCH 1/3] fix: for the mobile pages

---
 components/docs/Visualizer.tsx   | 24 ++++++++++-
 components/layout/DocsLayout.tsx | 68 ++++++++++++++++++++++++--------
 2 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/components/docs/Visualizer.tsx b/components/docs/Visualizer.tsx
index 6c3db2adfb34..f4e75de8bb33 100644
--- a/components/docs/Visualizer.tsx
+++ b/components/docs/Visualizer.tsx
@@ -18,9 +18,29 @@ const schemaLoaders: Record<SupportedVersion, () => Promise<{ default: unknown }
 
 function Visualizer({ version }: VisualizerProps) {
   const [schema, setSchema] = useState<JSONSchema7Object | null>(null);
+  const [isExplorerAvailable, setIsExplorerAvailable] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 1024px)');
+    const updateExplorerAvailability = () => setIsExplorerAvailable(mediaQuery.matches);
+
+    updateExplorerAvailability();
+    mediaQuery.addEventListener('change', updateExplorerAvailability);
+
+    return () => mediaQuery.removeEventListener('change', updateExplorerAvailability);
+  }, []);
 
   useEffect(() => {
     let isMounted = true;
+
+    if (!isExplorerAvailable) {
+      setSchema(null);
+
+      return () => {
+        isMounted = false;
+      };
+    }
+
     const currentVersion: SupportedVersion = version === '3.1.0' ? '3.1.0' : '3.0.0';
 
     setSchema(null);
@@ -37,9 +57,9 @@ function Visualizer({ version }: VisualizerProps) {
     return () => {
       isMounted = false;
     };
-  }, [version]);
+  }, [isExplorerAvailable, version]);
 
-  if (!schema) {
+  if (!isExplorerAvailable || !schema) {
     return null;
   }
 
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index 9a32f037794a..bf2b697804d5 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -17,6 +17,7 @@ import Feedback from '../Feedback';
 import Head from '../Head';
 import ArrowRight from '../icons/ArrowRight';
 import IconMenuCenter from '../icons/CenterMenu';
+import IconExplorer from '../icons/Explorer';
 import DocsMobileMenu from '../navigation/DocsMobileMenu';
 import DocsNavWrapper from '../navigation/DocsNavWrapper';
 import TOC from '../TOC';
@@ -71,6 +72,34 @@ function generateEditLink(post: IPost) {
   );
 }
 
+/**
+ * @description Screen shown when the specification explorer is unavailable on small devices.
+ */
+function MobileExplorerUnavailable() {
+  return (
+    <main className='flex min-h-screen items-center justify-center bg-gray-50 px-6 py-16'>
+      <section className='max-w-md text-center'>
+        <div className='mx-auto flex size-14 items-center justify-center rounded-full bg-secondary-100'>
+          <IconExplorer className='size-8 fill-secondary-500 stroke-secondary-500' />
+        </div>
+        <Heading className='mt-6' level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.md}>
+          Specification Explorer is not available on mobile
+        </Heading>
+        <p className='mt-4 font-sans text-base leading-7 text-gray-600 antialiased'>
+          The explorer needs a larger screen to show the schema navigation and details clearly. Open this page on a
+          tablet or desktop, or read the standard specification reference instead.
+        </p>
+        <Link
+          href='/docs/reference/specification/v3.0.0'
+          className='mt-6 inline-flex rounded-md bg-secondary-500 px-4 py-2 font-body text-sm font-medium text-white transition duration-150 ease-in-out hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2'
+        >
+          View specification reference
+        </Link>
+      </section>
+    </main>
+  );
+}
+
 /**
  * @description DocsLayout component
  * @param {IPost} props.post The post to render in the layout
@@ -96,24 +125,29 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
 
   if (router.pathname.includes('-explorer')) {
     return (
-      <div>
-        <div className='absolute left-2 top-24 z-10'>
-          <Button
-            className='inline-flex h-full justify-center rounded-sm border border-gray-300 bg-white py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900'
-            text='Menu'
-            icon={<IconMenuCenter className='size-6 fill-gray-700' />}
-            onClick={() => {
-              if (explorerDocMenu) {
-                setExplorerDocMenu(false);
-              } else {
-                setExplorerDocMenu(true);
-              }
-            }}
-          />
-          {explorerDocMenu && <div className='explorer-menu-wrapper mt-2'>{sidebar}</div>}
+      <>
+        <div className='lg:hidden'>
+          <MobileExplorerUnavailable />
         </div>
-        <article className=''>{children}</article>
-      </div>
+        <div className='hidden lg:block'>
+          <div className='absolute left-2 top-24 z-10'>
+            <Button
+              className='inline-flex h-full justify-center rounded-sm border border-gray-300 bg-white py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900'
+              text='Menu'
+              icon={<IconMenuCenter className='size-6 fill-gray-700' />}
+              onClick={() => {
+                if (explorerDocMenu) {
+                  setExplorerDocMenu(false);
+                } else {
+                  setExplorerDocMenu(true);
+                }
+              }}
+            />
+            {explorerDocMenu && <div className='explorer-menu-wrapper mt-2'>{sidebar}</div>}
+          </div>
+          <article>{children}</article>
+        </div>
+      </>
     );
   }
 

From 5eb7803de2de44918da787de76af43658ef8f383 Mon Sep 17 00:00:00 2001
From: Sourya07 <singhsourya137@gmail.com>
Date: Fri, 22 May 2026 17:57:39 +0530
Subject: [PATCH 2/3] fixes the sonar and bot comments

---
 components/docs/Visualizer.tsx   | 2 +-
 components/layout/DocsLayout.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/docs/Visualizer.tsx b/components/docs/Visualizer.tsx
index f4e75de8bb33..528944f92a81 100644
--- a/components/docs/Visualizer.tsx
+++ b/components/docs/Visualizer.tsx
@@ -21,7 +21,7 @@ function Visualizer({ version }: VisualizerProps) {
   const [isExplorerAvailable, setIsExplorerAvailable] = useState(false);
 
   useEffect(() => {
-    const mediaQuery = window.matchMedia('(min-width: 1024px)');
+    const mediaQuery = globalThis.matchMedia('(min-width: 1024px)');
     const updateExplorerAvailability = () => setIsExplorerAvailable(mediaQuery.matches);
 
     updateExplorerAvailability();
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index bf2b697804d5..85b8e8aeff9b 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -75,7 +75,7 @@ function generateEditLink(post: IPost) {
 /**
  * @description Screen shown when the specification explorer is unavailable on small devices.
  */
-function MobileExplorerUnavailable() {
+function MobileExplorerUnavailable({ href }: { href: string }) {
   return (
     <main className='flex min-h-screen items-center justify-center bg-gray-50 px-6 py-16'>
       <section className='max-w-md text-center'>
@@ -90,7 +90,7 @@ function MobileExplorerUnavailable() {
           tablet or desktop, or read the standard specification reference instead.
         </p>
         <Link
-          href='/docs/reference/specification/v3.0.0'
+          href={href}
           className='mt-6 inline-flex rounded-md bg-secondary-500 px-4 py-2 font-body text-sm font-medium text-white transition duration-150 ease-in-out hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2'
         >
           View specification reference
@@ -122,12 +122,13 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
   const navigation = posts.docsTree;
 
   const sidebar = <DocsNavWrapper setShowMenu={setShowMenu} navigation={navigation} post={post} />;
+  const explorerReferenceHref = post.slug.replace(/-explorer$/, '');
 
   if (router.pathname.includes('-explorer')) {
     return (
       <>
         <div className='lg:hidden'>
-          <MobileExplorerUnavailable />
+          <MobileExplorerUnavailable href={explorerReferenceHref} />
         </div>
         <div className='hidden lg:block'>
           <div className='absolute left-2 top-24 z-10'>

From 5415b27d195f799f8159e410d58a1bb369d999ae Mon Sep 17 00:00:00 2001
From: Sourya07 <singhsourya137@gmail.com>
Date: Fri, 22 May 2026 18:16:28 +0530
Subject: [PATCH 3/3] fixes -> the sonar problem

---
 components/layout/DocsLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index 85b8e8aeff9b..50061e3f5598 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -75,7 +75,7 @@ function generateEditLink(post: IPost) {
 /**
  * @description Screen shown when the specification explorer is unavailable on small devices.
  */
-function MobileExplorerUnavailable({ href }: { href: string }) {
+function MobileExplorerUnavailable({ href }: Readonly<{ href: string }>) {
   return (
     <main className='flex min-h-screen items-center justify-center bg-gray-50 px-6 py-16'>
       <section className='max-w-md text-center'>