1st day patch, mobile fixes

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>

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;

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 {