feat(nx-dev): display toc for smaller viewport sizes (#16061)

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -8,6 +8,7 @@ import { Breadcrumbs, Footer } from '@nrwl/nx-dev/ui-common';
 import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { cx } from 'nx-dev/ui-primitives';
 import { useRef } from 'react';
 import { collectHeadings, TableOfContents } from './table-of-contents';
 
@@ -19,6 +20,7 @@ export function DocViewer({
   relatedDocuments: RelatedDocument[];
 }): JSX.Element {
   const router = useRouter();
+  const isIntro = router.asPath.includes('/getting-started/intro');
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { metadata, node, treeNode } = renderMarkdown(
@@ -86,17 +88,26 @@ export function DocViewer({
               <div
                 ref={ref}
                 data-document="main"
-                className="prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl"
+                className={cx(
+                  'prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
+                  { 'xl:max-w-2xl': !isIntro }
+                )}
               >
                 {vm.content}
               </div>
-              <div className="fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 2xl:block">
-                <TableOfContents
-                  elementRef={ref}
-                  path={router.basePath}
-                  headings={vm.tableOfContent}
-                />
-              </div>
+              {!isIntro && (
+                <div
+                  className={cx(
+                    'fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 xl:block'
+                  )}
+                >
+                  <TableOfContents
+                    elementRef={ref}
+                    path={router.basePath}
+                    headings={vm.tableOfContent}
+                  />
+                </div>
+              )}
             </div>
             {/*RELATED CONTENT*/}
             <div