fix: toc item rounded corner when range is small

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 30, 2024 · 1708533 · 1708533
1 parent 5dc4fb5
commit 1708533
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/renderer/src/components/ui/markdown/components/Toc.tsx b/src/renderer/src/components/ui/markdown/components/Toc.tsx
@@ -134,7 +134,7 @@ export const Toc: Component = ({ className }) => {
         const [start, end] = currentRange
 
         // current top is this range, the precent is ?
-        const precent = ((actualTop - start) / (end - start))
+        const precent = (actualTop - start) / (end - start)
 
         // console.log("currentRange", currentRange, precent)
         // position , precent
@@ -174,15 +174,14 @@ export const Toc: Component = ({ className }) => {
         open={hoverShow}
         onOpenChange={setHoverShow}
       >
-        <HoverCard.Trigger>
+        <HoverCard.Trigger asChild>
           <ul
             ref={setTreeRef}
             className={cn("group overflow-auto scrollbar-none", className)}
           >
             {toc.map((heading, index) => (
               <MemoedItem
                 heading={heading}
-                // active={heading.anchorId === activeId}
                 key={heading.title}
                 rootDepth={rootDepth}
                 onClick={handleScrollTo}
@@ -203,7 +202,10 @@ export const Toc: Component = ({ className }) => {
                   animate={{ opacity: 1, x: 100 }}
                   exit={{ opacity: 0, x: 110, transition: { duration: 0.1 } }}
                   transition={{ duration: 0.5, type: "spring" }}
-                  className="relative z-10 -mt-1 rounded-xl border bg-white px-3 py-1 text-xs drop-shadow-xl dark:bg-neutral-950"
+                  className={cn(
+                    "relative z-10 -mt-1 rounded-xl border bg-white px-3 py-1 text-xs drop-shadow-xl dark:bg-neutral-950",
+                    "max-h-[calc(100svh-4rem)] overflow-auto scrollbar-none",
+                  )}
                 >
                   {toc.map((heading, index) => (
                     <li

diff --git a/src/renderer/src/components/ui/markdown/components/TocItem.tsx b/src/renderer/src/components/ui/markdown/components/TocItem.tsx
@@ -58,12 +58,13 @@ export const TocItem: FC<TocItemProps> = memo((props) => {
           isScrollOut && "dark:bg-zinc-700",
           !!range &&
           "!bg-zinc-400/50 data-[active=true]:group-hover:!bg-zinc-500 dark:!bg-zinc-600",
+          "overflow-hidden",
         )}
       >
         <span
-          className="absolute inset-y-0 left-0 z-[1] rounded-full bg-zinc-600 duration-75 ease-linear dark:bg-zinc-400"
+          className="absolute inset-y-0 left-0 z-[1] ml-[-12px] rounded-full bg-zinc-600 duration-75 ease-linear dark:bg-zinc-400"
           style={{
-            width: `${range * 100}%`,
+            width: `calc(${range * 100}% + 12px)`,
           }}
         />
       </span>
@@ -72,12 +73,12 @@ export const TocItem: FC<TocItemProps> = memo((props) => {
 })
 
 const widthMap = {
-  1: 72,
-  2: 60,
-  3: 48,
-  4: 36,
-  5: 24,
-  6: 12,
+  1: 72 - 6,
+  2: 60 - 6,
+  3: 48 - 6,
+  4: 36 - 6,
+  5: 24 - 6,
+  6: 12 - 6,
 }
 
 TocItem.displayName = "TocItem"
diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
@@ -443,7 +443,12 @@ const ContainerToc: FC = () => {
     <RootPortal to={wrappedElement!}>
       <div className="absolute right-[-130px] top-0 h-full w-[100px]">
         <div className="sticky top-0">
-          <Toc className="flex flex-col items-end animate-in fade-in-0 slide-in-from-bottom-12 easing-spring-soft @[900px]:items-start" />
+          <Toc
+            className={cn(
+              "flex flex-col items-end animate-in fade-in-0 slide-in-from-bottom-12 easing-spring-soft @[900px]:items-start",
+              "max-h-[calc(100vh-100px)] overflow-auto scrollbar-none",
+            )}
+          />
         </div>
       </div>
     </RootPortal>