fix: some ui

Author: Innei

src/components/layout/header/internal/HeaderDrawerButton.tsx

@@ -36,7 +36,7 @@ export const HeaderDrawerButton = () => {
 
                 <Dialog.Content>
                   <m.dialog
-                    className="fixed left-0 right-0 top-0 z-[12] block overflow-auto rounded-xl bg-base-100/90 backdrop-blur-sm"
+                    className="fixed left-0 right-0 top-0 z-[12] m-0 block w-full overflow-auto rounded-xl bg-base-100/90 px-3 backdrop-blur-sm"
                     initial={{ opacity: 0.8 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}

src/components/widgets/comment/Comment.tsx

@@ -119,7 +119,7 @@ export const Comment: Component<{
                       {key}
                     </span>
                     {!!location && (
-                      <span className="min-w-0 max-w-full flex-shrink-0 break-all text-[10px] opacity-[0.35]">
+                      <span className="min-w-0 max-w-full truncate break-all text-[10px] opacity-[0.35]">
                         来自：{location}
                       </span>
                     )}

src/components/widgets/toc/TocFAB.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useParams, usePathname } from 'next/navigation'
 
 import { FABPortable } from '~/components/ui/fab'
@@ -14,18 +14,23 @@ export const TocFAB = () => {
   const pathname = usePathname()
   const params = useParams()
 
-  const presentToc = useCallback(() => {
+  const $headings = useMemo(() => {
     const $mainMarkdownRender = document.getElementById(MAIN_MARKDOWN_ID)
     if (!$mainMarkdownRender) return
+
     const $headings = [
       ...$mainMarkdownRender.querySelectorAll('h1,h2,h3,h4,h5,h6'),
     ] as HTMLHeadingElement[]
+
+    return $headings
+  }, [])
+  const presentToc = useCallback(() => {
     const dispose = present({
       title: 'Table of Content',
 
       content: () => (
         <TocTree
-          $headings={$headings}
+          $headings={$headings!}
           className="space-y-3 [&>li]:py-1"
           onItemClick={() => {
             dispose()
@@ -34,7 +39,10 @@ export const TocFAB = () => {
         />
       ),
     })
-  }, [pathname, params])
+  }, [pathname, params, $headings])
+
+  if (!$headings?.length) return null
+
   return (
     <FABPortable aria-label="Show ToC" onClick={presentToc}>
       <i className="icon-[mingcute--list-expansion-line]" />