fix(docs): fix sidebar scroll offset and border-color cascade
Align sticky sidebar/TOC top offset with actual header height using a --header-h CSS variable, and wrap the global border-color reset in @layer base so Tailwind utilities like border-primary take effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Yechan Kim committed
Apr 12, 2026 at 18:14 UTC
2e18603565cd2fdf97bf8d4b17835a803e3e5544
2 files changed
+11
-4
docs/src/app.css
+9
-2
@@ -46,6 +46,11 @@
46
--color-text-muted: var(--text-muted);
47
}
48
49
+/* Layout tokens */
50
+:root {
51
+ --header-h: 6.5rem; /* 104px — matches sticky header outer height (py-5 + py-2 + content) */
52
+}
53
+
54
/* Hero & landing page custom properties (not in @theme — used via var() in inline styles) */
55
:root {
56
--background: oklch(97% 0.005 250);
@@ -88,8 +93,10 @@
93
}
94
95
/* Global border color reset (matches React frontend) */
91
-* {
92
- border-color: var(--border);
96
+@layer base {
97
+ * {
98
+ border-color: var(--border);
99
+ }
100
}
101
102
/* Base styles */
docs/src/routes/+layout.svelte
+2
-2
@@ -130,7 +130,7 @@
130
<!-- Doc pages: sidebars + prose -->
131
<div class="mx-auto max-w-[90rem] lg:flex">
132
<aside class="hidden w-64 shrink-0 border-r border-gray-200 lg:block dark:border-white/8">
133
- <div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto p-6">
133
+ <div class="sticky top-[var(--header-h)] h-[calc(100vh-var(--header-h))] overflow-y-auto p-6">
134
<Sidebar />
135
</div>
136
</aside>
@@ -145,7 +145,7 @@
145
</main>
146
147
<aside class="hidden w-56 shrink-0 border-l border-gray-200 xl:block dark:border-white/8">
148
- <div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-8 pr-4">
148
+ <div class="sticky top-[var(--header-h)] h-[calc(100vh-var(--header-h))] overflow-y-auto py-8 pr-4">
149
<TableOfContents />
150
</div>
151
</aside>