From e0e6904ac3b55546a7dd4e400d5652493724193d Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Wed, 19 Jul 2023 17:52:48 +0330
Subject: [PATCH] fix: ensure the mdx scroll button sticks to the bottom of the
 hero section

---
 .../mdx/ScrollToBottom/ScrollToBottom.tsx       | 14 ++++++++++++--
 .../mdx/ScrollToBottom/styles.module.scss       | 17 ++++++++++++++---
 2 files changed, 26 insertions(+), 5 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 9b097c1..94da38d 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,6 @@
 import { ArrowDownIcon, IconButton } from '@acid-info/lsd-react'
 import clsx from 'clsx'
-import React, { HTMLProps } from 'react'
+import React, { HTMLProps, useMemo } from 'react'
 import { useWindowSize } from 'react-use'
 import { makeStyle } from '../../../lib/makeStyle'
 import { useIsMobile } from '../../../lib/useIsMobile'
@@ -34,6 +34,13 @@ export const ScrollToBottom = (
     })
   }
 
+  const maxTop = useMemo(
+    () =>
+      (document.querySelector('.mdx-hero')?.getBoundingClientRect()?.bottom ??
+        0) + window.scrollY,
+    [ws.height],
+  )
+
   return (
     <IconButton
       onClick={handleScrollToBottom}
@@ -43,7 +50,10 @@ export const ScrollToBottom = (
         className,
         scrollY > 20 && styles.hide,
       )}
-      style={makeStyle({ ...(style ?? {}) }, { vh: ws.height / 100 + 'px' })}
+      style={makeStyle(
+        { ...(style ?? {}) },
+        { vh: ws.height / 100 + 'px', maxTop: maxTop + '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 4be3b70..9ca6132 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
@@ -1,6 +1,8 @@
 @use '../../../css/utils';
 
 .scrollToBottom {
+  --offset-y: -2rem;
+
   z-index: 100;
   position: absolute;
   background: rgb(var(--lsd-surface-primary)) !important;
@@ -10,9 +12,18 @@
 
   &.hide {
     opacity: 0;
-    transform: translateY(calc(-100% - 2.625rem));
+    transform: translateY(calc(-100% + var(--offset-y) - 0.625rem));
   }
 
-  top: calc(100 * var(--vh) - var(--ifm-navbar-height));
-  transform: translateY(calc(-100% - 2rem));
+  top: min(
+    calc(100 * var(--vh) - var(--ifm-navbar-height)),
+    calc(var(--maxTop) - var(--ifm-navbar-height))
+  );
+  transform: translateY(calc(-100% + var(--offset-y)));
+}
+
+@include utils.responsive('lg', 'down') {
+  .scrollToBottom {
+    --offset-y: -1rem;
+  }
 }