Skip to content

fix: Allow ToC to scroll independently of page content #7754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+11 −4
Open

fix: Allow ToC to scroll independently of page content #7754

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b42040b
ToC Fix
utkarsh125 May 16, 2025
05de366
Fix: replaced raw css with tailwind
utkarsh125 May 16, 2025
e752090
Restored packages/ui-components/Containers/MetaBar/index.tsx
utkarsh125 May 16, 2025
fc7ad61
Replaced display:none with @apply hidden
utkarsh125 May 16, 2025
473b8a5
Fix: not all elements were being rendered
utkarsh125 May 17, 2025
d0d0427
Removed the redundant scrollbar styles
utkarsh125 May 17, 2025
79a83a0
fix: metabar no longer has a short length
utkarsh125 May 18, 2025
dd9a507
fix: metabar length fix
utkarsh125 May 18, 2025
22bd816
fix: chromatic diff
utkarsh125 May 18, 2025
cf6dfa1
fix: removed the added padding
utkarsh125 May 18, 2025
1428437
fix: removed the additional p-4
utkarsh125 May 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions packages/ui-components/Containers/MetaBar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,26 @@
flex-col
items-start
gap-8
overflow-y-auto
border-neutral-200
px-4
py-6
[overflow-wrap:anywhere]
lg:sticky
lg:top-0
lg:h-max
lg:min-h-screen
lg:max-h-screen
lg:px-6
dark:border-neutral-900;

dl {
@apply w-full;
@apply flex
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that with lg: this will only apply on large+ screens. Nice application of Tailwind here!

w-full
flex-col
gap-1.5
pb-12
[scrollbar-width:none]
lg:max-h-[calc(100vh-6rem)]
lg:overflow-y-auto
[&::-webkit-scrollbar]:hidden;
}

dt {
Expand Down Expand Up @@ -55,6 +61,7 @@

ol {
@apply flex
w-full
list-none
flex-col
gap-1.5
Expand Down
Loading