From 4d897d0b66a0ef353e41971d37eb7ff460c98314 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 13 Jul 2023 20:44:20 +0800
Subject: [PATCH] fix: aside will be covered by footer

Signed-off-by: Innei <i@innei.in>
---
 src/components/layout/content/Content.tsx         |  2 +-
 .../widgets/shared/ActionAsideContainer.tsx       | 15 ++++++++++++++-
 .../widgets/shared/ArticleRightAside.tsx          |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/content/Content.tsx b/src/components/layout/content/Content.tsx
index bf63fdf09e..57b5cce36c 100644
--- a/src/components/layout/content/Content.tsx
+++ b/src/components/layout/content/Content.tsx
@@ -1,6 +1,6 @@
 export const Content: Component = ({ children }) => {
   return (
-    <main className="relative z-[2] px-4 pt-[4.5rem] fill-content md:px-0">
+    <main className="relative z-[1] px-4 pt-[4.5rem] fill-content md:px-0">
       {children}
     </main>
   )
diff --git a/src/components/widgets/shared/ActionAsideContainer.tsx b/src/components/widgets/shared/ActionAsideContainer.tsx
index 50acfeb787..d79505d81c 100644
--- a/src/components/widgets/shared/ActionAsideContainer.tsx
+++ b/src/components/widgets/shared/ActionAsideContainer.tsx
@@ -1,17 +1,30 @@
 'use client'
 
+import { useViewport } from '~/atoms'
 import { clsxm } from '~/lib/helper'
+import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
 import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider'
 
 export const ActionAsideContainer: Component = ({ className, children }) => {
   const isEOA = useIsEOWrappedElement()
+  const h = useViewport((v) => v.h)
+
+  const isEndOfPage = usePageScrollLocationSelector(
+    (y) => {
+      const threshold = 100
+
+      return y + h >= document.body.scrollHeight - threshold
+    },
+    [h],
+  )
 
   return (
     <div
       className={clsxm(
-        'absolute bottom-0 left-0 max-h-[300px] flex-col space-y-8 transition-opacity duration-200 ease-in-out',
+        'absolute bottom-0 left-0 -mb-4 max-h-[300px] flex-col space-y-8 p-4 transition-all duration-200 ease-in-out',
         !isEOA ? 'opacity-20 hover:opacity-100' : '',
         className,
+        isEndOfPage && 'bottom-[100px]',
       )}
     >
       {children}
diff --git a/src/components/widgets/shared/ArticleRightAside.tsx b/src/components/widgets/shared/ArticleRightAside.tsx
index a15cea5efe..3a865acb8a 100644
--- a/src/components/widgets/shared/ArticleRightAside.tsx
+++ b/src/components/widgets/shared/ArticleRightAside.tsx
@@ -74,7 +74,7 @@ const ArticleRightAsideImpl: Component = ({ children }) => {
         />
       </div>
       {React.cloneElement(children as any, {
-        className: 'ml-4 translate-y-[calc(100%+24px)]',
+        className: 'translate-y-[calc(100%+24px)]',
       })}
     </aside>
   )