Skip to content

fix(dev-hub): sidebar and table of contents positioning #3073

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

Merged
merged 6 commits into from
Sep 22, 2025
Merged

fix(dev-hub): sidebar and table of contents positioning #3073

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cdf837f
fix: sidebar positioning
alexcambose Sep 21, 2025
ea5ddec
revert
alexcambose Sep 22, 2025
5e2960f
fix toc
alexcambose Sep 22, 2025
eeb1d16
comment
alexcambose Sep 22, 2025
76a95e7
feat: use portal for search
alexcambose Sep 22, 2025
6610d9f
formatting
alexcambose Sep 22, 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
11 changes: 11 additions & 0 deletions apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,15 @@ Overrides for Fumadocs content. Everything after prose is MDX generated content

#nd-sidebar {
--fd-sidebar-top: var(--header-height) !important;
position: sticky !important;
height: calc(100vh - var(--header-height));
}

#nd-docs-layout {
flex-direction: row !important;
padding-inline-start: 0 !important;
}

#nd-toc {
top: calc(var(--header-height) + 1rem) !important;
}
5 changes: 1 addition & 4 deletions packages/component-library/src/AppShell/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
}

.body {
background: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
Expand All @@ -33,9 +32,7 @@
background: theme.color("background", "primary");
border-top-left-radius: calc(var(--offset) * theme.border-radius("xl"));
border-top-right-radius: calc(var(--offset) * theme.border-radius("xl"));
overflow: hidden auto;
transform: scale(calc(100% - (var(--offset) * 5%)));
Comment on lines 36 to 37
Copy link
Contributor Author

@alexcambose alexcambose Sep 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

@cprussin I removed these, for some reason it was messing with the position fixed/sticky and we weren't able to fix elements to the top of the page.
I'm not sure what these were doing or why we had them.

Copy link
Collaborator

@cprussin cprussin Sep 22, 2025

Choose a reason for hiding this comment

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

This is used when opening the mobile drawer to offset the page underneath it. It does need to be here -- I'm surprised you're having issues with sticky positioning as we are actively using sticky positioning on table headers in IH to stick table headers to the top of the page....

Copy link
Contributor Author

@alexcambose alexcambose Sep 22, 2025

Choose a reason for hiding this comment

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

Reverted

height: 100dvh;
min-height: 100dvh;
scrollbar-gutter: stable;

.header {
Expand Down