feat(theme-default): display complete content of toc in aside component

packages/theme-default/src/components/Aside/index.scss

@@ -1,25 +1,23 @@
 .aside-link {
-  padding-bottom: 1px;
-}
-
-.aside-link-text {
-  padding: 0px 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding: 0.25rem 0;
+  margin-bottom: 1px;
   border-radius: var(--rp-radius-small) 0 0 var(--rp-radius-small);
-  font-size: 13px;
-  line-height: 1.75rem;
 
   &:hover {
     background-color: var(--rp-c-bg-mute);
   }
-}
 
-.aside-active {
-  &,
-  &:hover {
-    color: var(--rp-c-link);
-    background-color: var(--rp-c-brand-tint);
+  &.aside-active {
+    &,
+    &:hover {
+      color: var(--rp-c-link);
+      background-color: var(--rp-c-brand-tint);
+    }
   }
 }
+
+.aside-link-text {
+  padding: 0px 12px;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}

packages/theme-default/src/components/Aside/index.tsx

@@ -47,7 +47,7 @@ export function Aside(props: { headers: Header[]; outlineTitle: string }) {
           title={parseInlineMarkdownText(header.text)}
           className="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block"
           style={{
-            paddingLeft: (header.depth - baseHeaderLevel) * 12,
+            marginLeft: (header.depth - baseHeaderLevel) * 12,
             fontWeight: 'semibold',
           }}
           onClick={e => {

packages/theme-default/src/logic/sideEffects.ts

@@ -120,9 +120,7 @@ export function bindingAsideScroll() {
   const activate = (links: HTMLAnchorElement[], index: number) => {
     if (links[index]) {
       const id = links[index].getAttribute('href');
-      const currentLink = aside?.querySelector(
-        `a[href="#${id?.slice(1)}"] > span`,
-      );
+      const currentLink = aside?.querySelector(`a[href="#${id?.slice(1)}"]`);
       if (currentLink) {
         if (prevActiveLink) {
           prevActiveLink.classList.remove('aside-active');