From d51a756c1beb52c83980e0e7146ac568ce7ab051 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Mon, 17 Nov 2025 18:10:52 -0800
Subject: [PATCH] improvement(docs): remove copy page from mobile view on docs
 (#2037)

* improvement(docs): remove copy page from mobile view on docs

* bring title and pagenav lower on mobile

* added cursor pointer to clickable components in docs
---
 apps/docs/app/[lang]/[[...slug]]/page.tsx              | 10 ++++++----
 .../docs/components/docs-layout/sidebar-components.tsx |  4 ++--
 apps/docs/components/ui/code-block.tsx                 |  2 +-
 apps/docs/components/ui/copy-page-button.tsx           |  2 +-
 apps/docs/components/ui/language-dropdown.tsx          |  4 ++--
 apps/docs/components/ui/search-trigger.tsx             |  2 +-
 apps/docs/components/ui/theme-toggle.tsx               |  4 ++--
 7 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/docs/app/[lang]/[[...slug]]/page.tsx b/apps/docs/app/[lang]/[[...slug]]/page.tsx
index fa91d1d3ec..8997592c10 100644
--- a/apps/docs/app/[lang]/[[...slug]]/page.tsx
+++ b/apps/docs/app/[lang]/[[...slug]]/page.tsx
@@ -198,15 +198,17 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
           component: <CustomFooter />,
         }}
       >
-        <div className='relative'>
+        <div className='relative mt-6 sm:mt-0'>
           <div className='absolute top-1 right-0 flex items-center gap-2'>
-            <CopyPageButton
-              content={`# ${page.data.title}
+            <div className='hidden sm:flex'>
+              <CopyPageButton
+                content={`# ${page.data.title}
 
 ${page.data.description || ''}
 
 ${page.data.content || ''}`}
-            />
+              />
+            </div>
             <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
           </div>
           <DocsTitle>{page.data.title}</DocsTitle>
diff --git a/apps/docs/components/docs-layout/sidebar-components.tsx b/apps/docs/components/docs-layout/sidebar-components.tsx
index 3432c30ca9..1394bc9f14 100644
--- a/apps/docs/components/docs-layout/sidebar-components.tsx
+++ b/apps/docs/components/docs-layout/sidebar-components.tsx
@@ -69,7 +69,7 @@ export function SidebarFolder({
           </Link>
           <button
             onClick={() => setOpen(!open)}
-            className='rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
+            className='cursor-pointer rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
             aria-label={open ? 'Collapse' : 'Expand'}
           >
             <ChevronRight
@@ -84,7 +84,7 @@ export function SidebarFolder({
         <button
           onClick={() => setOpen(!open)}
           className={cn(
-            'flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
+            'flex w-full cursor-pointer items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
             'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
             'text-gray-800 dark:text-gray-200'
           )}
diff --git a/apps/docs/components/ui/code-block.tsx b/apps/docs/components/ui/code-block.tsx
index bd2e2233ee..784bf3284a 100644
--- a/apps/docs/components/ui/code-block.tsx
+++ b/apps/docs/components/ui/code-block.tsx
@@ -30,7 +30,7 @@ export function CodeBlock(props: React.ComponentProps<typeof FumadocsCodeBlock>)
               if (pre) handleCopy(pre.textContent || '')
             }}
             className={cn(
-              'rounded-md p-2 transition-all',
+              'cursor-pointer rounded-md p-2 transition-all',
               'border border-border bg-background/80 hover:bg-muted',
               'backdrop-blur-sm'
             )}
diff --git a/apps/docs/components/ui/copy-page-button.tsx b/apps/docs/components/ui/copy-page-button.tsx
index b5bd6fc859..782343e337 100644
--- a/apps/docs/components/ui/copy-page-button.tsx
+++ b/apps/docs/components/ui/copy-page-button.tsx
@@ -23,7 +23,7 @@ export function CopyPageButton({ content }: CopyPageButtonProps) {
   return (
     <button
       onClick={handleCopy}
-      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+      className='flex cursor-pointer items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
       aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
     >
       {copied ? (
diff --git a/apps/docs/components/ui/language-dropdown.tsx b/apps/docs/components/ui/language-dropdown.tsx
index 403a65b5b7..a34be00d4f 100644
--- a/apps/docs/components/ui/language-dropdown.tsx
+++ b/apps/docs/components/ui/language-dropdown.tsx
@@ -82,7 +82,7 @@ export function LanguageDropdown() {
         aria-haspopup='listbox'
         aria-expanded={isOpen}
         aria-controls='language-menu'
-        className='flex items-center gap-1.5 rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        className='flex cursor-pointer items-center gap-1.5 rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
         style={{
           fontFamily:
             '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
@@ -110,7 +110,7 @@ export function LanguageDropdown() {
                 }}
                 role='option'
                 aria-selected={currentLang === code}
-                className={`flex w-full items-center gap-3 px-3 py-3 text-base transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-muted/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring md:gap-2 md:px-2.5 md:py-2 md:text-sm ${
+                className={`flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-base transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-muted/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring md:gap-2 md:px-2.5 md:py-2 md:text-sm ${
                   currentLang === code ? 'bg-muted/60 font-medium text-primary' : 'text-foreground'
                 }`}
               >
diff --git a/apps/docs/components/ui/search-trigger.tsx b/apps/docs/components/ui/search-trigger.tsx
index 1c4699395f..76ceefa936 100644
--- a/apps/docs/components/ui/search-trigger.tsx
+++ b/apps/docs/components/ui/search-trigger.tsx
@@ -15,7 +15,7 @@ export function SearchTrigger() {
   return (
     <button
       type='button'
-      className='flex h-10 w-[460px] items-center gap-2 rounded-xl border border-border/50 px-3 py-2 text-sm backdrop-blur-xl transition-colors hover:border-border'
+      className='flex h-10 w-[460px] cursor-pointer items-center gap-2 rounded-xl border border-border/50 px-3 py-2 text-sm backdrop-blur-xl transition-colors hover:border-border'
       style={{
         backgroundColor: 'hsla(0, 0%, 5%, 0.85)',
         backdropFilter: 'blur(33px) saturate(180%)',
diff --git a/apps/docs/components/ui/theme-toggle.tsx b/apps/docs/components/ui/theme-toggle.tsx
index 21b71df9e6..76c80b52e9 100644
--- a/apps/docs/components/ui/theme-toggle.tsx
+++ b/apps/docs/components/ui/theme-toggle.tsx
@@ -14,7 +14,7 @@ export function ThemeToggle() {
 
   if (!mounted) {
     return (
-      <button className='flex items-center justify-center rounded-md p-1 text-muted-foreground'>
+      <button className='flex cursor-pointer items-center justify-center rounded-md p-1 text-muted-foreground'>
         <Moon className='h-4 w-4' />
       </button>
     )
@@ -23,7 +23,7 @@ export function ThemeToggle() {
   return (
     <button
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className='flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground'
+      className='flex cursor-pointer items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground'
       aria-label='Toggle theme'
     >
       {theme === 'dark' ? <Moon className='h-4 w-4' /> : <Sun className='h-4 w-4' />}