Skip to content

Commit fbde52c

Browse files
authored
[Beta] Fix HTML layout shift (#5041)
1 parent aa12fae commit fbde52c

File tree

2 files changed

+16
-16
lines changed

2 files changed

+16
-16
lines changed

beta/src/components/Layout/Page.tsx

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,22 @@ export function Page({children, toc}: PageProps) {
3636
<>
3737
<SocialBanner />
3838
<SidebarContext.Provider value={routeTree}>
39-
<div className="h-auto flex flex-col lg:flex-row">
40-
<div className="fixed lg:sticky top-0 left-0 right-0 py-0 lg:w-80 flex-none lg:static shadow lg:shadow-none z-50">
39+
<div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
40+
<div className="fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none z-50">
4141
<Nav />
4242
</div>
43-
44-
<div className="lg:hidden h-16 mb-2" />
45-
4643
{/* No fallback UI so need to be careful not to suspend directly inside. */}
4744
<React.Suspense fallback={null}>
48-
<div className="flex flex-1 w-full h-full self-stretch min-w-0">
49-
<main className="w-full self-stretch h-full mx-auto relative w-full min-w-0">
50-
<article className="break-words" key={asPath}>
51-
{children}
52-
</article>
53-
<Footer />
54-
</main>
55-
</div>
45+
<main className="min-w-0">
46+
<div className="lg:hidden h-16 mb-2" />
47+
<article className="break-words" key={asPath}>
48+
{children}
49+
</article>
50+
<Footer />
51+
</main>
5652
</React.Suspense>
57-
58-
<div className="lg:w-80 flex-none lg:max-w-xs hidden 2xl:block">
59-
{toc.length > 0 && <Toc headings={toc} />}
53+
<div className="hidden lg:max-w-xs 2xl:block">
54+
{toc.length > 0 && <Toc headings={toc} key={asPath} />}
6055
</div>
6156
</div>
6257
</SidebarContext.Provider>

beta/tailwind.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ module.exports = {
6868
code: 'calc(1em - 20%)',
6969
},
7070
colors,
71+
gridTemplateColumns: {
72+
'only-content': 'auto',
73+
'sidebar-content': '20rem auto',
74+
'sidebar-content-toc': '20rem auto 20rem',
75+
},
7176
},
7277
},
7378
plugins: [],

0 commit comments

Comments
 (0)