fix: fix the position of mdx scroll to bottom button on mobile

packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx

@@ -1,6 +1,8 @@
 import { ArrowDownIcon, IconButton } from '@acid-info/lsd-react'
 import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
+import { useWindowSize } from 'react-use'
+import { makeStyle } from '../../../lib/makeStyle'
 import { useHydrated } from '../../../lib/useHydrated'
 import { useIsMobile } from '../../../lib/useIsMobile'
 import { useScrollY } from '../../../lib/useScrollY'
@@ -11,10 +13,11 @@ type TProps = {}
 export const ScrollToBottom = (
   props: TProps & HTMLProps<HTMLButtonElement>,
 ): JSX.Element => {
-  const { children, className, ...rest } = props
+  const { children, className, style, ...rest } = props
   const isHydrated = useHydrated()
   const scrollY = useScrollY()
   const isMobile = useIsMobile()
+  const ws = useWindowSize()
 
   const handleScrollToBottom = () => {
     const article = document.querySelector('.main-wrapper article')
@@ -42,6 +45,7 @@ export const ScrollToBottom = (
         className,
         (scrollY > 20 || !isHydrated) && styles.hide,
       )}
+      style={makeStyle({ ...(style ?? {}) }, { vh: ws.height / 100 + 'px' })}
       {...(rest as any)}
     >
       <ArrowDownIcon color="primary" />

packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss

@@ -5,13 +5,14 @@
   position: absolute;
   background: rgb(var(--lsd-surface-primary)) !important;
   transition: all 0.2s ease-in-out;
-  transform: translateY(0);
+  transform: translateY(-2rem);
   opacity: 1;
 
   &.hide {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(calc(-100% - 2.625rem));
   }
 
-  bottom: 2rem;
+  top: calc(100 * var(--vh) - var(--ifm-navbar-height));
+  transform: translateY(calc(-100% - 2rem));
 }