From 15a61fd4bdc46da4714d4a877f5c8cb2c0d6ae59 Mon Sep 17 00:00:00 2001
From: Xanazf <hotdamnsucka@gmail.com>
Date: Fri, 18 Oct 2024 04:34:22 +0300
Subject: [PATCH] collapsible button width fix

---
 .../navigation/sidebars/toc/Table.tsx         |  8 ++++----
 src/styles/docs/toc/types-toc.css             | 20 ++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/navigation/sidebars/toc/Table.tsx b/src/components/navigation/sidebars/toc/Table.tsx
index b3b49cf..92c133d 100644
--- a/src/components/navigation/sidebars/toc/Table.tsx
+++ b/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>
diff --git a/src/styles/docs/toc/types-toc.css b/src/styles/docs/toc/types-toc.css
index ee7c769..82cd168 100644
--- a/src/styles/docs/toc/types-toc.css
+++ b/src/styles/docs/toc/types-toc.css
@@ -51,19 +51,29 @@
 
   & .types-item {
     margin-block: 10px;
-    display: flex;
-    align-items: center;
-    gap: 0.478rem;
+    width: 100%;
+    transition: background-color 0.3s;
+    padding: 0.117rem;
+    padding-left: 0.338rem;
+    border-radius: 5px;
 
     & svg {
       opacity: 0.6;
-      width: 1.2em;
-      height: 1.2em;
+      width: 1.3rem;
+      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;