Skip to content

fix(docs): prevent clipped search header #132

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
LimiNode merged 3 commits into from
Sep 11, 2026
Merged

fix(docs): prevent clipped search header #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a6d6f9
fix(docs): prevent clipped search header
LimiNode Sep 11, 2026
a97e52a
fix(docs): restore sidebar theme toggle row
LimiNode Sep 11, 2026
da83a41
fix(docs): center sidebar theme toggle
LimiNode Sep 11, 2026
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: 6 additions & 5 deletions .github/doxygen-custom/logit-docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
}

@media screen and (min-width: 768px) {
/* Keep the search field on its own full sidebar row. */
#MSearchBox {
width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium))) !important;
/* The two-line project brief needs more room than the theme default. */
html {
--top-height: 140px;
}

#MSearchField {
width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium)) - 65px) !important;
/* Keep the theme toggle opposite the search box, as in the original sidebar layout. */
#logit-theme-toggle {
top: calc(100% + var(--spacing-small) + 1.5px);
}
}
20 changes: 15 additions & 5 deletions .github/scripts/docs-layout-smoke.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ async function inspectViewport(page, name, viewport) {

const layout = await page.evaluate(() => {
const sideNav = document.querySelector("#side-nav")?.getBoundingClientRect();
const top = document.querySelector("#top")?.getBoundingClientRect();
const search = document.querySelector("#MSearchBox")?.getBoundingClientRect();
const toggle = document.querySelector("doxygen-awesome-dark-mode-toggle")?.getBoundingClientRect();
const root = document.documentElement;
Expand All @@ -34,6 +35,8 @@ async function inspectViewport(page, name, viewport) {
sidebarWidth: sideNav?.width ?? 0,
sidebarLeft: sideNav?.left ?? 0,
sidebarRight: sideNav?.right ?? 0,
topHeight: top?.height ?? 0,
topBottom: top?.bottom ?? 0,
searchLeft: search?.left ?? 0,
searchRight: search?.right ?? 0,
toggleLeft: toggle?.left ?? 0,
Expand All @@ -44,6 +47,7 @@ async function inspectViewport(page, name, viewport) {
toggleBottom: toggle?.bottom ?? 0,
searchWidth: search?.width ?? 0,
spacingMedium: parseFloat(getComputedStyle(root).getPropertyValue("--spacing-medium")),
searchbarHeight: parseFloat(getComputedStyle(root).getPropertyValue("--searchbar-height")),
toggleCount: document.querySelectorAll("doxygen-awesome-dark-mode-toggle").length,
targetContainsToggle: Boolean(document.querySelector("#logit-theme-toggle > doxygen-awesome-dark-mode-toggle")),
cssSidebarWidth: parseFloat(getComputedStyle(root).getPropertyValue("--side-nav-fixed-width")),
Expand All @@ -64,21 +68,27 @@ async function inspectViewport(page, name, viewport) {
layout.toggleBottom <= layout.searchTop + 1;
assert(separated,
`${name}: search box and dark-mode toggle overlap`);
assert(layout.toggleTop < layout.searchTop,
`${name}: dark-mode toggle is not above the search box`);
assert(layout.targetContainsToggle && layout.toggleTop < layout.searchTop,
assert(layout.targetContainsToggle,
`${name}: dark-mode toggle is not anchored in the header area`);
assert(layout.toggleCount === 1,
`${name}: expected one dark-mode toggle, got ${layout.toggleCount}`);

if (viewport.width >= 768) {
assert(layout.searchBottom <= layout.topBottom + 1,
`${name}: search box is clipped by #top (search bottom ${layout.searchBottom}px, #top bottom ${layout.topBottom}px)`);
assert(Math.abs(layout.cssSidebarWidth - 335) <= 1,
`${name}: expected --side-nav-fixed-width to be 335px, got ${layout.cssSidebarWidth}px`);
assert(Math.abs(layout.sidebarWidth - 335) <= 1,
`${name}: expected sidebar width to be 335px, got ${layout.sidebarWidth}px`);
const expectedSearchWidth = layout.sidebarWidth - 2 * layout.spacingMedium;
const expectedSearchWidth = layout.sidebarWidth - 2 * layout.spacingMedium - layout.searchbarHeight - 1;
assert(layout.searchWidth >= expectedSearchWidth - 2,
`${name}: search box is too narrow (${layout.searchWidth}px; expected about ${expectedSearchWidth}px)`);
assert(Math.abs(layout.toggleTop - layout.searchTop) <= 5,
`${name}: dark-mode toggle is not opposite the search box`);
const searchCenter = (layout.searchTop + layout.searchBottom) / 2;
const toggleCenter = (layout.toggleTop + layout.toggleBottom) / 2;
assert(Math.abs(toggleCenter - searchCenter) <= 1,
`${name}: dark-mode toggle is not vertically centered with the search box`);
assert(layout.searchLeft >= layout.sidebarLeft - 1 &&
layout.searchRight <= layout.sidebarRight + 1,
`${name}: search box is not contained by the sidebar`);
Expand All @@ -87,7 +97,7 @@ async function inspectViewport(page, name, viewport) {
`${name}: dark-mode toggle is not contained by the sidebar`);
}

console.log(`${name}: layout OK`);
console.log(`${name}: layout OK (top height ${layout.topHeight}px, search ${layout.searchTop}-${layout.searchBottom}px, top bottom ${layout.topBottom}px)`);
}

(async () => {
Expand Down
Loading