fix: aside will be covered by footer

Signed-off-by: Innei <[email protected]>

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>
   )

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}

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>
   )