From 975f769b48a96f4c5e6574a3a3ee6f05953d5035 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Tue, 18 Jul 2023 12:55:54 +0330
Subject: [PATCH] fix: fix the position of mdx scroll to bottom button on
 mobile

---
 .../components/mdx/ScrollToBottom/ScrollToBottom.tsx       | 6 +++++-
 .../components/mdx/ScrollToBottom/styles.module.scss       | 7 ++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
index 2cbbbe0..1a0296f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
+++ b/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" />
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss
index 9a2ada8..4be3b70 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/styles.module.scss
+++ b/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));
 }