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 all commits
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
20 changes: 20 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,24 @@ 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;
}

/* Hacky fix to get the TOC to be sticky */
#nd-toc {
top: var(--header-height) !important;
height: max-content;
position: sticky;
margin-left: calc(-1 * var(--fd-toc-width));
}

#nd-toc > div {
position: relative;
left: var(--fd-toc-width);
}
15 changes: 10 additions & 5 deletions apps/developer-hub/src/components/search-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default";
import { useCallback, useState } from "react";
import { createPortal } from "react-dom";

export const SearchButton = () => {
const [open, setOpen] = useState(false);
Expand All @@ -19,11 +20,15 @@ export const SearchButton = () => {
largeScreenContent="Search"
onClick={handleSearch}
/>
<DefaultSearchDialog
open={open}
onOpenChange={setOpen}
api="/api/search"
/>
{open &&
createPortal(
<DefaultSearchDialog
open={open}
onOpenChange={setOpen}
api="/api/search"
/>,
document.body,
)}
</>
);
};
2 changes: 1 addition & 1 deletion 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 @@ -33,9 +33,9 @@
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"));
height: 100dvh;
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think this change is safe but I'd be careful with it and make sure to test across screen sizes, especially with the interactions with overlays / drawers

Copy link
Contributor Author

Choose a reason for hiding this comment

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

actually this is just reverting to the initial version, think just the ordering changed here

Copy link
Collaborator

Choose a reason for hiding this comment

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

ah yes I missed the deleted line below, nice ok

overflow: hidden auto;
transform: scale(calc(100% - (var(--offset) * 5%)));
height: 100dvh;
scrollbar-gutter: stable;

.header {
Expand Down
Loading