Skip to content

Commit 1922971

Browse files
Axyl1410onmax
Axyl1410
and
onmax
authored
fix(docs): improve docs layout responsiveness (#404)
Co-authored-by: onmax <maximogarciamtnez@gmail.com>
1 parent 5306fd8 commit 1922971

9 files changed

Lines changed: 254 additions & 110 deletions

File tree

‎docs/app/app.config.ts‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,8 @@ export default defineAppConfig({
2828
},
2929
},
3030
},
31-
page: {
32-
slots: {
33-
root: 'flex flex-col lg:flex-row lg:gap-8 px-4 sm:px-6 lg:px-8 xl:px-12',
34-
left: 'hidden',
35-
center: 'flex-1 min-w-0 max-w-[var(--fd-content-width,860px)] mx-auto',
36-
right: 'hidden xl:block w-[var(--fd-toc-width,268px)] shrink-0',
37-
},
38-
},
3931
pageBody: {
4032
base: 'mt-8 pb-24 space-y-12',
4133
},
42-
pageAside: {
43-
slots: {
44-
root: 'sticky top-[var(--ui-header-height)] max-h-[calc(100vh-var(--ui-header-height))] overflow-y-auto py-8',
45-
},
46-
},
47-
contentToc: {
48-
slots: {
49-
root: '',
50-
container: '',
51-
header: 'text-sm font-semibold mb-3 text-[var(--ui-text-highlighted)]',
52-
links: 'space-y-1',
53-
link: 'text-sm block py-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors',
54-
linkActive: 'text-[var(--ui-text-highlighted)]',
55-
},
56-
},
5734
},
5835
})

‎docs/app/app.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,3 @@ provide('navigation', navigation)
3434
<UToaster />
3535
</div>
3636
</template>
37-
38-
<style>
39-
.app-root {
40-
--header-height: var(--ui-header-height, 56px);
41-
}
42-
</style>

‎docs/app/assets/css/main.css‎

Lines changed: 137 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,27 @@
66
:root {
77
--ui-radius: 0.125rem;
88
--ui-bg: var(--color-white);
9-
--fd-sidebar-width: 268px;
10-
--fd-toc-width: 268px;
11-
--fd-content-width: 860px;
9+
--header-height: 3.5rem;
10+
--banner-height: 42px;
11+
/* Mirror better-auth/docs/app/globals.css */
12+
--fd-sidebar-width: 280px;
13+
--fd-toc-width: 0px;
14+
--fd-page-width: 900px;
15+
--fd-layout-width: 100%;
1216
}
1317

18+
@media (min-width: 1024px) {
19+
:root {
20+
--fd-sidebar-width: 300px;
21+
/* same as better-auth: min(100vw - sidebar, 1200px) */
22+
--fd-layout-width: min(calc(100vw - var(--fd-sidebar-width)), 1200px);
23+
}
24+
}
25+
26+
/* 80rem — better-auth enables side TOC here */
1427
@media (min-width: 1280px) {
1528
:root {
16-
--fd-sidebar-width: 286px;
17-
--fd-toc-width: 286px;
29+
--fd-toc-width: 280px;
1830
}
1931
}
2032

@@ -132,3 +144,123 @@ pre, code {
132144
.hero-code > div > div {
133145
margin: 0 !important;
134146
}
147+
148+
/* Native scrollbar: kill light Windows track "glow" on dark bg */
149+
html {
150+
scrollbar-width: thin;
151+
scrollbar-color: color-mix(in srgb, var(--ui-border) 90%, transparent) transparent;
152+
}
153+
154+
html::-webkit-scrollbar,
155+
body::-webkit-scrollbar,
156+
.docs-main::-webkit-scrollbar,
157+
.docs-main *::-webkit-scrollbar {
158+
width: 10px;
159+
height: 10px;
160+
}
161+
162+
html::-webkit-scrollbar-track,
163+
body::-webkit-scrollbar-track,
164+
.docs-main::-webkit-scrollbar-track,
165+
.docs-main *::-webkit-scrollbar-track,
166+
html::-webkit-scrollbar-corner,
167+
body::-webkit-scrollbar-corner {
168+
background: transparent;
169+
}
170+
171+
html::-webkit-scrollbar-thumb,
172+
body::-webkit-scrollbar-thumb,
173+
.docs-main::-webkit-scrollbar-thumb,
174+
.docs-main *::-webkit-scrollbar-thumb {
175+
background-color: color-mix(in srgb, var(--ui-border) 90%, transparent);
176+
border-radius: 9999px;
177+
border: 2px solid transparent;
178+
background-clip: padding-box;
179+
}
180+
181+
html::-webkit-scrollbar-thumb:hover,
182+
body::-webkit-scrollbar-thumb:hover,
183+
.docs-main::-webkit-scrollbar-thumb:hover,
184+
.docs-main *::-webkit-scrollbar-thumb:hover {
185+
background-color: color-mix(in srgb, var(--ui-text-muted) 70%, transparent);
186+
}
187+
188+
189+
/* Docs page — 1:1 with better-auth fumadocs DocsPage (#nd-page / #nd-article / #nd-toc) */
190+
.docs-page,
191+
#nd-page {
192+
display: grid;
193+
grid-template-columns: minmax(0, 1fr) var(--fd-toc-width, 0px);
194+
column-gap: 0;
195+
width: 100%;
196+
max-width: var(--fd-layout-width, 1200px);
197+
margin-inline: auto;
198+
min-width: 0;
199+
padding-inline: 1rem;
200+
box-sizing: border-box;
201+
}
202+
203+
@media (min-width: 640px) {
204+
.docs-page,
205+
#nd-page {
206+
padding-inline: 1.5rem;
207+
}
208+
}
209+
210+
@media (min-width: 1024px) {
211+
.docs-page,
212+
#nd-page {
213+
padding-inline: 2rem;
214+
}
215+
}
216+
217+
@media (min-width: 1280px) {
218+
.docs-page,
219+
#nd-page {
220+
column-gap: 2rem;
221+
}
222+
}
223+
224+
.docs-article,
225+
#nd-article {
226+
min-width: 0;
227+
width: 100%;
228+
max-width: var(--fd-page-width, 900px);
229+
}
230+
231+
.docs-toc,
232+
#nd-toc {
233+
display: none;
234+
min-width: 0;
235+
width: var(--fd-toc-width, 0px);
236+
overflow-x: hidden;
237+
overflow-y: auto;
238+
overscroll-behavior-y: contain;
239+
scrollbar-width: none;
240+
}
241+
242+
.docs-toc::-webkit-scrollbar,
243+
#nd-toc::-webkit-scrollbar {
244+
display: none;
245+
}
246+
247+
/* 80rem — show side TOC; align top with article title (no extra top padding) */
248+
@media (min-width: 1280px) {
249+
.docs-toc,
250+
#nd-toc {
251+
display: block;
252+
position: sticky;
253+
top: calc(var(--header-height, 3.5rem) + 1rem);
254+
align-self: start;
255+
max-height: calc(100dvh - var(--header-height, 3.5rem) - 2rem);
256+
padding-top: 0;
257+
padding-bottom: 4rem;
258+
padding-inline-start: 2rem;
259+
}
260+
}
261+
262+
/* Docs content: keep wide code blocks inside the page */
263+
.docs-main :where(pre, table) {
264+
max-width: 100%;
265+
overflow-x: auto;
266+
}

‎docs/app/components/AnnouncementBanner.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="announcement-banner relative overflow-hidden border-b border-[var(--ui-border)] bg-stone-50/50 dark:bg-stone-950/50 h-[42px]">
2+
<div class="announcement-banner relative overflow-hidden border-b border-[var(--ui-border)] bg-stone-50 dark:bg-black h-[var(--banner-height,42px)]">
33
<div class="absolute inset-0 bg-grid text-stone-200 dark:text-stone-900 [background-size:16px_16px] opacity-50" />
44
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/60 via-transparent to-transparent dark:from-stone-900/60" />
55
<div class="absolute inset-0 bg-gradient-to-r from-stone-50/80 via-transparent to-stone-50/80 dark:from-stone-950/80 dark:to-stone-950/80" />

‎docs/app/components/app/AppHeader.vue‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
<script setup lang="ts">
22
const appConfig = useAppConfig()
33
const site = useSiteConfig()
4-
const route = useRoute()
5-
const { sidebarOpen, toggle: toggleSidebar } = useDocusSidebar()
64
const { open: searchOpen } = useContentSearch()
75
8-
const isDocsPage = computed(() => route.path.startsWith('/getting-started')
9-
|| route.path.startsWith('/core-concepts')
10-
|| route.path.startsWith('/guides')
11-
|| route.path.startsWith('/integrations')
12-
|| route.path.startsWith('/api')
13-
|| route.path.startsWith('/better-auth'))
14-
156
const navLinks = [
167
{ name: 'docs', path: '/getting-started' },
178
{ name: 'demo', path: 'https://demo-nuxt-better-auth.onmax.me', external: true },
@@ -20,7 +11,7 @@ const navLinks = [
2011
</script>
2112

2213
<template>
23-
<UHeader :ui="{ container: 'max-w-full !gap-0 !px-0 h-14 overflow-hidden', root: 'border-b border-[var(--ui-border)] h-14', left: 'gap-0 h-full', right: 'gap-0 h-full', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
14+
<UHeader :ui="{ container: 'max-w-full !gap-0 !px-0 h-14 overflow-hidden', root: 'border-b border-[var(--ui-border)] h-14', header: '!px-0 h-14', left: 'gap-0 h-full', right: 'gap-0 h-full lg:pr-4', title: 'h-full items-center' }" to="/" :title="appConfig.header?.title || site.name">
2415
<template #title>
2516
<div class="header-logo">
2617
<!-- Nuxt -->
@@ -70,15 +61,12 @@ const navLinks = [
7061
class="flex items-center h-full px-5 border-l border-[var(--ui-border)] text-muted transition-colors group-hover:text-[var(--ui-text)]"
7162
aria-label="GitHub"
7263
>
73-
<UIcon name="i-simple-icons-github" class="size-4" />
64+
<UIcon name="i-simple-icons-github" class="size-5" />
7465
</NuxtLink>
7566
<div class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--ui-text-muted)] opacity-0 transition-all duration-500 group-hover:w-full group-hover:opacity-100" />
7667
</li>
7768
</nav>
7869

79-
<!-- Docs sidebar toggle (mobile) -->
80-
<UButton v-if="isDocsPage" color="neutral" variant="ghost" :icon="sidebarOpen ? 'i-lucide-x' : 'i-lucide-panel-left'" class="mobile-header-action lg:hidden" :ui="{ leadingIcon: 'mobile-header-icon' }" @click="toggleSidebar" />
81-
8270
<UButton
8371
color="neutral"
8472
variant="ghost"
@@ -102,15 +90,14 @@ const navLinks = [
10290
color="neutral"
10391
variant="ghost"
10492
:icon="open ? 'i-lucide-x' : 'i-lucide-menu'"
105-
class="mobile-header-action lg:hidden"
93+
class="mobile-header-action mr-4 lg:hidden"
10694
:ui="{ leadingIcon: 'mobile-header-icon' }"
10795
@click="toggle"
10896
/>
10997
</template>
11098

11199
<template #body>
112-
<UNavigationMenu :items="[]" orientation="vertical" class="w-full" />
113-
<nav class="flex flex-col border-t border-[var(--ui-border)] mt-4 pt-4">
100+
<nav class="flex flex-col">
114101
<NuxtLink
115102
v-for="link in navLinks"
116103
:key="link.name"
@@ -135,19 +122,21 @@ const navLinks = [
135122
padding-inline: 1rem;
136123
border-right: 1px solid var(--ui-border);
137124
box-sizing: border-box;
125+
flex-shrink: 0;
138126
}
139127
140128
@media (min-width: 640px) {
141129
.header-logo {
142130
gap: 0.75rem;
143-
width: var(--fd-sidebar-width, 268px);
131+
/* Same token + box model as .docs-sidebar so borders line up */
132+
width: var(--fd-sidebar-width, 280px);
144133
padding-inline: 1.25rem;
145134
}
146135
}
147136
148-
@media (min-width: 1280px) {
137+
@media (min-width: 1024px) {
149138
.header-logo {
150-
width: 286px;
139+
width: var(--fd-sidebar-width, 300px);
151140
}
152141
}
153142
@@ -169,8 +158,8 @@ const navLinks = [
169158
:deep(.mobile-header-action > span),
170159
:deep(.mobile-header-action > svg) {
171160
display: block;
172-
width: 1.375rem;
173-
height: 1.375rem;
161+
width: 1.25rem;
162+
height: 1.25rem;
174163
margin: 0;
175164
flex: none;
176165
}

‎docs/app/components/docs/DocsSearchButton.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const { open } = useContentSearch()
1515
align-items: center;
1616
gap: 0.5rem;
1717
width: 100%;
18+
margin: 0;
19+
flex-shrink: 0;
1820
padding: 0.625rem 1.25rem;
1921
font-size: 0.875rem;
2022
color: var(--ui-text-muted);

‎docs/app/components/docs/DocsSidebar.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,11 @@ const accordionItems = computed(() =>
123123
display: flex;
124124
flex-direction: column;
125125
min-height: 100%;
126+
width: 100%;
127+
}
128+
129+
.docs-sidebar-nav :deep(> *) {
130+
width: 100%;
126131
}
127132
128133
/* Add top border to first accordion item */

0 commit comments

Comments
 (0)