feat: improve mobile experience

src/components/ScrollToTopButton/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ChevronUp } from 'lucide-react'
 
 export default function ScrollToTopButton({
@@ -11,20 +12,35 @@ export default function ScrollToTopButton({
   className?: string
   visible?: boolean
 }) {
+  const { isSmallScreen } = useScreenSize()
+
   const handleScrollToTop = () => {
+    if (isSmallScreen) {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      return
+    }
     scrollAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
   return (
-    <Button
-      variant="secondary-2"
+    <div
       className={cn(
-        `absolute bottom-6 right-6 rounded-full w-12 h-12 p-0 hover:text-background transition-transform ${visible ? '' : 'translate-y-20'}`,
+        `sticky z-20 flex justify-end pr-3 transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
         className
       )}
-      onClick={handleScrollToTop}
+      style={{
+        bottom: isSmallScreen
+          ? 'calc(env(safe-area-inset-bottom) + 3.75rem)'
+          : 'calc(env(safe-area-inset-bottom) + 0.75rem)'
+      }}
     >
-      <ChevronUp />
-    </Button>
+      <Button
+        variant="secondary-2"
+        className="rounded-full w-12 h-12 p-0 hover:text-background"
+        onClick={handleScrollToTop}
+      >
+        <ChevronUp />
+      </Button>
+    </div>
   )
 }