From e1146363959f2da803be727cc48991c1152672b4 Mon Sep 17 00:00:00 2001
From: Val Alexander <68980965+BunsDev@users.noreply.github.com>
Date: Sun, 24 May 2026 13:07:22 -0500
Subject: [PATCH] docs: polish nav title alignment and sidebar density

- Nudge the nav title (sparkle + "Coven docs") down 4px via
  transform: translateY so it sits at the same vertical level as the
  macOS traffic-lights row in browsers that hide the URL bar.
- Fix the Fumadocs root-section selector single-row CSS: the previous
  selectors (`ps-2 pe-4`, `py-1.5`, `text-xs`) never matched the
  upstream class names. Updated to target `rounded-lg p-2 border
  bg-fd-secondary/50` (trigger) and `rounded-lg p-1.5` (popover items)
  with descriptions in `text-[0.8125rem]`. Dropdown descriptions like
  "Codex and Claude Code Adapters" now truncate to a single row.
- Add sidebar compactness: drop vertical padding on sidebar links and
  folder triggers from p-2 (8px) to py-1 (4px) while preserving the
  8px horizontal padding, for a denser table-of-contents read.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/globals.css       | 24 +++++++++++++++++++-----
 app/layout.config.tsx |  2 +-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 2e8945e..a300417 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -165,14 +165,18 @@ a:hover { color: var(--coven-violet-light); }
   min-width: 1.75rem;
 }
 
-/* Keep Fumadocs root selector descriptions to a single row. */
-aside button[class*="rounded-lg"][class*="ps-2"][class*="pe-4"] > div,
-[data-radix-popper-content-wrapper] a[class*="py-1.5"] > div {
+/* Keep Fumadocs root-section selector descriptions to a single row.
+ * Fumadocs renders the trigger button with `rounded-lg p-2 border bg-fd-secondary/50`
+ * and the popover panel items (portaled to body) with `rounded-lg p-1.5`.
+ * The description sits in a `<p class="text-[0.8125rem] text-fd-muted-foreground">`
+ * — NOT `text-xs`, so the older selectors below never matched. */
+#nd-sidebar button[class*="rounded-lg"][class*="border"][class*="bg-fd-secondary"] > div,
+[data-radix-popper-content-wrapper] a[class*="rounded-lg"][class*="p-1.5"] > div {
   min-width: 0;
 }
 
-aside button[class*="rounded-lg"][class*="ps-2"][class*="pe-4"] p.text-xs.text-fd-muted-foreground,
-[data-radix-popper-content-wrapper] a[class*="py-1.5"] p.text-xs.text-fd-muted-foreground {
+#nd-sidebar button[class*="rounded-lg"][class*="border"][class*="bg-fd-secondary"] p.text-fd-muted-foreground,
+[data-radix-popper-content-wrapper] a[class*="rounded-lg"][class*="p-1.5"] p.text-fd-muted-foreground {
   display: block;
   max-width: 100%;
   overflow: hidden;
@@ -180,6 +184,16 @@ aside button[class*="rounded-lg"][class*="ps-2"][class*="pe-4"] p.text-xs.text-f
   white-space: nowrap;
 }
 
+/* Sidebar compactness — tighten vertical density of links and folders.
+ * Fumadocs ships sidebar items with `p-2` (8px). Drop vertical padding to 4px
+ * while preserving the 8px horizontal padding, so labels keep breathing room
+ * but the column reads as a denser table of contents. */
+#nd-sidebar a[class*="rounded-lg"]:not([class*="border"]):not([class*="p-1.5"]),
+#nd-sidebar button[class*="rounded-lg"]:not([class*="border"]):not([class*="bg-fd-secondary"]) {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
 /* Code blocks.
  * Fumadocs wraps <pre> in <figure class="bg-fd-card shiki ...">, which paints
  * a lighter grey frame (#121212) around the darker inner pre (#0d0d0d). We
diff --git a/app/layout.config.tsx b/app/layout.config.tsx
index 8d7faad..ef61ac8 100644
--- a/app/layout.config.tsx
+++ b/app/layout.config.tsx
@@ -7,7 +7,7 @@ export const baseOptions: BaseLayoutProps = {
   },
   nav: {
     title: (
-      <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 600, letterSpacing: 0 }}>
+      <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 600, letterSpacing: 0, transform: 'translateY(4px)' }}>
         <Icon icon="ph:sparkle-duotone" width={20} color="var(--coven-violet)" />
         <span>Coven</span>
         <span style={{ fontSize: '0.78rem', color: 'var(--coven-violet)', fontWeight: 700, letterSpacing: 0, textTransform: 'uppercase', marginLeft: '2px' }}>docs</span>