fixed mobile menus, page spacing, horizontal scroll, .toc-wrapper

src/components/navigation/sidebars/nav/Tree.tsx

@@ -102,11 +102,13 @@ export const Tree: Component<TreeProps> = props => {
                                   : ""
                               }
                             >
-                              <a
-                                href={`/docs/types/${submodule.type}/${submodule.name}`}
-                              >
-                                {submodule.name}
-                              </a>
+                              <p>
+                                <a
+                                  href={`/docs/types/${submodule.type}/${submodule.name}`}
+                                >
+                                  {submodule.name}
+                                </a>
+                              </p>
                             </div>
                           )}
                         </For>

src/layouts/ConfigLayout.astro

@@ -32,8 +32,8 @@ const { headings, frontmatter } = Astro.props;
       <hr />
       <slot />
     </div>
+    <TOC mobile={false} headings={headings} data-pagefind-ignore/>
   </div>
-  <TOC mobile={false} headings={headings} data-pagefind-ignore/>
 </DocsLayout>
 
 <TOCIntersectionObserver/>

src/pages/docs/types/[type]/[name].astro

@@ -53,7 +53,7 @@ const details = data.details
 ---
 <DocsLayout title={`${route.name} - ${route.type}`} description={data?.description ?? ""}>
   <div class="docs">
-    <div class="typedocs-content">
+    <div class="docs-content typedocs-content">
       <hr />
       <h2 class="typedocs-title" data-pagefind-weight="10">
         {route.name}:

src/styles/docs/docs-types.css

@@ -74,8 +74,6 @@
 }
 
 .typedocs-content {
-  flex-grow: 1;
-
   &>p {
     margin-block: 0.618rem;
   }

src/styles/docs/docs.css

@@ -3,29 +3,23 @@
 
 .docslayout-root {
   margin-inline: 0.618rem;
-  margin-top: 3.5rem;
+  margin-top: 4rem;
 }
 
-.docs,
-.docslayout-root {
+.docs {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
 
-.spacer-desktop {
-  display: none;
-}
-
-.c-breadcrumbs {
-  --color-link-breadcrumbs: hsl(var(--accent-600));
-  margin-top: 1.056rem;
-  margin-bottom: 0.318rem;
-  max-width: 100svw;
+.docslayout-inner {
+  min-height: 100svh;
 }
 
 .docs-content {
+  flex-grow: 1;
+
   & section {
-    max-width: 95svw;
+    max-width: 100svw;
     margin-block: 1.618rem;
   }
 
@@ -39,6 +33,17 @@
   }
 }
 
+.spacer-desktop {
+  display: none;
+}
+
+.c-breadcrumbs {
+  --color-link-breadcrumbs: hsl(var(--accent-600));
+  margin-top: 1.056rem;
+  margin-bottom: 0.318rem;
+  max-width: 100svw;
+}
+
 .heading {
   &>[id] {
     width: max-content;
@@ -81,17 +86,6 @@ ul {
 }
 
 @media (min-width: 65rem) {
-  .docs,
-  .docslayout-root {
-    gap: 0.648rem;
-  }
-
-  .docslayout-root {
-    justify-content: center;
-    display: flex;
-    flex-direction: row;
-  }
-
   .docs-content {
     margin-inline: 1.272rem;
 
@@ -110,6 +104,12 @@ ul {
 }
 
 @media (min-width: 85rem) {
+  .docslayout-root {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+  }
+
   .docs {
     display: flex;
     flex-direction: row;
@@ -125,8 +125,3 @@ ul {
     min-width: 33.8rem;
   }
 }
-
-.docslayout-inner {
-  flex-grow: 1;
-  max-width: 100rem;
-}

src/styles/docs/nav/nav-tree.css

@@ -6,7 +6,6 @@
   & [data-part="item"] {
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
-    padding-left: 0.15rem;
   }
 }
 
@@ -18,7 +17,7 @@
   cursor: pointer;
   font-size: 1rem;
   width: 100%;
-  height: 2.2rem;
+  min-height: 2.2rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -80,7 +79,7 @@ html.dark .nav-shevron {
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: hsl(var(--nav-hovered-bkg))
+      background-color: hsl(var(--nav-hovered-bkg));
     }
 
     &>a {
@@ -93,8 +92,8 @@ html.dark .nav-shevron {
     }
   }
 
-    & .arktree-item.__current-type-doc,
-    [data-part="item-content"]>div.__current-type-doc {
+  & .arktree-item.__current-type-doc,
+  [data-part="item-content"]>div.__current-type-doc {
     background-color: hsl(var(--nav-selected-bkg));
 
     &>a {

src/styles/docs/nav/nav.css

@@ -31,11 +31,11 @@
   & .nav-items {
     position: absolute;
     z-index: 11;
-    overflow-y: scroll;
-    top: 2.5rem;
+    overflow: hidden;
+    top: 2.6rem;
     left: -1rem;
     width: 0;
-    height: 0;
+    height: calc(100svh - 2.5rem);
     font-size: 0.745rem;
     font-weight: 600;
     scrollbar-width: none;
@@ -52,9 +52,7 @@
     padding 0.3s ease;
 
     &.shown {
-      padding: 0.3rem;
       width: 100svw;
-      height: 50svh;
       background-color: hsl(var(--bg-900) / 0.6);
       backdrop-filter: blur(3px) saturate(180%);
       display: flex;
@@ -63,10 +61,19 @@
     }
 
     & .navtree {
+      padding: 1rem;
       height: 100%;
       width: 100%;
-      overflow: scroll;
-      padding: 6px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      margin-bottom: 4rem;
+      padding-left: 1rem;
+      text-wrap: nowrap;
+
+      & [data-part="item-trigger"] {
+        min-height: 3em;
+        max-width: 80%;
+      }
 
       & [data-part="item"] {
         margin-left: unset;
@@ -77,7 +84,6 @@
 
         & [data-part="item-content"] {
           & [data-part="item-trigger"] {
-            width: 93%;
             margin-left: 1em;
 
             & p {
@@ -86,8 +92,20 @@
           }
 
           & [data-part="item-content"] {
-            width: 80%;
-            margin-left: 24px;
+            max-width: 70%;
+            margin-left: 3.33em;
+
+            &>div {
+              min-height: 4em;
+              display: grid;
+
+              & a {
+                display: grid;
+                justify-items: start;
+                align-items: center;
+                min-height: 100%;
+              }
+            }
           }
         }
       }
@@ -95,7 +113,7 @@
   }
 }
 
-@media (min-width: 65rem) {
+@media (min-width: 85rem) {
   .nav-wrapper-mobile {
     display: none;
   }

src/styles/docs/toc/toc.css

@@ -84,15 +84,11 @@
   }
 }
 
-@media (max-width: 85rem) {
-  @media (min-width: 65rem) {
-    .toc-toggle {
-      --width: 25svw;
-    }
+@media (min-width: 65rem) {
+  .toc-toggle {
+    --width: 25svw;
   }
-}
 
-@media (min-width: 85rem) {
   .toc-wrapper-mobile {
     display: none;
   }
@@ -101,12 +97,12 @@
     background-color: transparent;
     display: block;
     position: sticky;
-    top: 5rem;
-    width: 19rem;
-    flex-shrink: 0;
-    max-height: 90svh;
+    top: 4rem;
+    min-width: max-content;
+    max-height: calc(100svh - 8rem);
     overflow-y: scroll;
     z-index: 10;
+    margin-right: 1.272rem;
 
     & .toc_a {
       transition: color 0.33s;

src/styles/global.css

@@ -62,7 +62,7 @@ html.dark {
 .header {
   position: fixed;
   top: 0;
-  width: 100%;
+  width: 100svw;
   z-index: 10;
   display: flex;
   align-items: center;
@@ -184,7 +184,7 @@ footer {
   }
 }
 
-@media (min-width: 65rem) {
+@media (min-width: 85rem) {
   html {
     font-size: 16px;
   }