From 221c16820cf49f141b5a2b371de35b92b04fa324 Mon Sep 17 00:00:00 2001
From: Xanazf <hotdamnsucka@gmail.com>
Date: Sat, 9 Nov 2024 12:36:09 +0200
Subject: [PATCH] 1st day patch, mobile fixes

---
 src/components/type/TypeTitle.astro |  2 +-
 src/styles/docs/docs-types.css      | 10 +++++++++-
 src/styles/docs/nav/nav-tree.css    | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/type/TypeTitle.astro b/src/components/type/TypeTitle.astro
index bd1d1fa..0399d84 100644
--- a/src/components/type/TypeTitle.astro
+++ b/src/components/type/TypeTitle.astro
@@ -43,7 +43,7 @@ const iconSelector: { [key: string]: string } = {
       <a href={typelink}>{ typelink_text }</a>
       {typename_generic &&
         (
-          <span class="type-datatype">&lt;</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">&gt;</span>
+          <span class="type-generic"><span class="type-datatype">&lt;</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">&gt;</span></span>
         )
       }
     </span>
diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css
index 83b4b0f..0933d8d 100644
--- a/src/styles/docs/docs-types.css
+++ b/src/styles/docs/docs-types.css
@@ -152,7 +152,12 @@
 
 .type-datatype {
   color: #808080;
-  width: max-content;
+}
+
+.type-generic {
+  position: absolute;
+  left: 0.845rem;
+  top: 1.217rem;
 }
 
 .typeprops {
@@ -319,6 +324,9 @@ html.dark .typevariants {
 }
 
 @media (min-width: 65rem) {
+  .type-datatype {
+    width: max-content;
+  }
   .root-nav {
     & .root-nav-entry {
       display: grid;
diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css
index 0bd6fe5..442da0e 100644
--- a/src/styles/docs/nav/nav-tree.css
+++ b/src/styles/docs/nav/nav-tree.css
@@ -22,6 +22,7 @@
   border-radius: 6px;
   transition: background-color 0.2s ease;
   padding: 0.4em;
+  font-size: 1rem;
 
   &:hover {
     background-color: hsl(var(--nav-hovered-bkg));
@@ -37,6 +38,14 @@
   }
 }
 
+.fade {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    #000 80%,
+    transparent
+  );
+}
+
 .nav-collapsible {
   overflow: hidden;
 
@@ -56,9 +65,14 @@
       }
 
       & > a {
+        font-size: 1rem;
         border-radius: 6px 0 0 6px;
         padding: 0.4em;
         flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        overflow: hidden;
       }
 
       &:hover {
@@ -75,6 +89,7 @@
       display: flex;
       flex-direction: row;
       align-items: stretch;
+      justify-content: center;
       gap: 0.1em;
 
       & svg {