overflow-two (#51)

Author: lukeweston1234

docs/app/assets/css/main.css

@@ -1,9 +1,9 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+
 @theme {
   --font-display: "Satoshi", "sans-serif";
   --font-heading: "Chillax", "sans-serif";
-
   --color-primary: var(--text-primary);
   --color-secondary: var(--text-secondary);
   --color-paragraph: var(--text-paragraph);
@@ -13,7 +13,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  
+
   --bg: #060606;
   --bg-gradient:radial-gradient(62.5% 62.87% at 40.23% 40.23%, rgba(219, 192, 245, 0.405) 0%, rgba(50, 114, 252, 0.07) 100%);
   --text-primary: #ffffff;
@@ -32,6 +32,10 @@ body {
   background: var(--bg);
 }
 
+#__nuxt {
+  height: 100%;
+}
+
 h1,
 h2,
 h3,

docs/app/layouts/default.vue

@@ -36,7 +36,7 @@ const links = [
         </a>
       </div>
       <!-- Content -->
-      <div class="w-full h-full overflow-y-auto px-6 py-3 md:px-16 md:py-6">
+      <div class="w-full flex-1 min-h-0 px-6 py-3 md:px-16 md:py-6">
         <slot></slot>
       </div>
     </div>

docs/app/pages/docs/[...slug].vue

@@ -2,12 +2,13 @@
 definePageMeta({ layout: "default" });
 
 const route = useRoute();
-const router = useRouter();
 
 const pageId = computed(() => `/docs/${route.path}`);
+
 const { data } = await useAsyncData(pageId, () =>
   queryCollection("docs").path(route.path).first()
 );
+
 const { data: docs } = await useAsyncData(() => queryCollection("docs").all());
 
 const currentDoc = computed(() =>
@@ -16,11 +17,6 @@ const currentDoc = computed(() =>
 const mobileOpen = ref(false);
 const dropdownRef = ref<HTMLElement | null>(null);
 
-function navigate(path: string) {
-  router.push(path);
-  mobileOpen.value = false;
-}
-
 function onClickOutside(e: MouseEvent) {
   if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
     mobileOpen.value = false;
@@ -119,16 +115,12 @@ onUnmounted(() => document.removeEventListener("mousedown", onClickOutside));
         </p>
       </div>
 
-      <div class="w-full h-full flex flex-col items-center overflow-y-auto">
-        <div class="h-full w-full max-w-200">
-          <div class="w-full">
-            <div v-if="data">
-              <article class="prose">
-                <h1>{{ data.title }}</h1>
-                <ContentRenderer :value="data" />
-              </article>
-            </div>
-          </div>
+      <div class="w-full min-h-0 flex flex-col items-center overflow-y-auto">
+        <div class="w-full max-w-200">
+          <article v-if="data" class="prose">
+            <h1>{{ data.title }}</h1>
+            <ContentRenderer :value="data" />
+          </article>
         </div>
       </div>
     </div>