collapsible button width fix

src/components/navigation/sidebars/toc/Table.tsx

@@ -43,11 +43,11 @@ export const Table: Component<{
           <For each={typeTOC.properties}>
             {prop => (
               <li class="types-item props-item">
-                <Tag />
                 <a
                   class="type-anchor"
                   href={`#${prop}`}
                 >
+                  <Tag />
                   {prop}
                 </a>
               </li>
@@ -60,11 +60,11 @@ export const Table: Component<{
           <For each={typeTOC.functions}>
             {func => (
               <li class="types-item func-item">
-                <RoundBrackets />
                 <a
                   class="type-anchor"
                   href={`#${func}`}
                 >
+                  <RoundBrackets />
                   {func}
                 </a>
               </li>
@@ -77,11 +77,11 @@ export const Table: Component<{
           <For each={typeTOC.signals}>
             {signal => (
               <li class="types-item signals-item">
-                <PowerCord />
                 <a
                   class="type-anchor"
                   href={`#${signal}`}
                 >
+                  <PowerCord />
                   {signal}
                 </a>
               </li>
@@ -94,11 +94,11 @@ export const Table: Component<{
           <For each={typeTOC.variants}>
             {variant => (
               <li class="types-item vars-item">
-                <FourDiamonds />
                 <a
                   class="type-anchor"
                   href={`#${variant}`}
                 >
+                  <FourDiamonds />
                   {variant}
                 </a>
               </li>

src/styles/docs/toc/types-toc.css

@@ -51,19 +51,29 @@
 
   & .types-item {
     margin-block: 10px;
-    display: flex;
+    width: 100%;
-    align-items: center;
+    transition: background-color 0.3s;
-    gap: 0.478rem;
+    padding: 0.117rem;
+    padding-left: 0.338rem;
+    border-radius: 5px;
 
     & svg {
       opacity: 0.6;
-      width: 1.2em;
+      width: 1.3rem;
-      height: 1.2em;
+      height: 1.3rem;
       transition: opacity 0.5s;
     }
 
+    & a {
+      display: flex;
+      align-items: center;
+      gap: 0.287rem;
+      width: 100%;
+    }
+
     &:hover {
       cursor: pointer;
+      background-color: hsla(0 0 100 / 0.07);
 
       & svg {
         opacity: 1;