fix: ensure the mdx scroll button sticks to the bottom of the hero se…

…ction
acid-info · Jul 19, 2023 · e0e6904 · e0e6904
1 parent ca12862
commit e0e6904
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 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
@@ -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
@@ -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;
+  }
 }