From 5a6d6f9393e821e66cd52bafb6aef1e66d76103e Mon Sep 17 00:00:00 2001 From: Aster Seker Date: Fri, 11 Sep 2026 21:32:18 +0300 Subject: [PATCH 1/3] fix(docs): prevent clipped search header Give the desktop documentation header enough vertical space for the wrapped project brief, remove the legacy dark-mode search stylesheet, and assert that the search box stays inside the header clipping boundary. --- .github/doxygen-custom/logit-docs.css | 10 +++------- .github/scripts/docs-layout-smoke.cjs | 7 ++++++- Doxyfile | 1 - 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/doxygen-custom/logit-docs.css b/.github/doxygen-custom/logit-docs.css index 2304bf7..7e32006 100644 --- a/.github/doxygen-custom/logit-docs.css +++ b/.github/doxygen-custom/logit-docs.css @@ -18,12 +18,8 @@ } @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; - } - - #MSearchField { - width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium)) - 65px) !important; + /* The two-line project brief needs more room than the theme default. */ + html { + --top-height: 140px; } } diff --git a/.github/scripts/docs-layout-smoke.cjs b/.github/scripts/docs-layout-smoke.cjs index 5009dcc..cb7c8c4 100644 --- a/.github/scripts/docs-layout-smoke.cjs +++ b/.github/scripts/docs-layout-smoke.cjs @@ -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; @@ -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, @@ -72,6 +75,8 @@ async function inspectViewport(page, name, viewport) { `${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, @@ -87,7 +92,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 () => { diff --git a/Doxyfile b/Doxyfile index 4715b0d..0571451 100644 --- a/Doxyfile +++ b/Doxyfile @@ -1415,7 +1415,6 @@ HTML_STYLESHEET = HTML_EXTRA_STYLESHEET = .github/doxygen-awesome-css/doxygen-awesome.css \ .github/doxygen-awesome-css/doxygen-awesome-sidebar-only.css \ - .github/doxygen-awesome-css/doxygen-awesome-sidebar-only-darkmode-toggle.css \ .github/doxygen-custom/logit-docs.css # The HTML_EXTRA_FILES tag can be used to specify one or more extra images or From a97e52a6b54fadaa28c74c4afea5c4f84a95cf11 Mon Sep 17 00:00:00 2001 From: Aster Seker Date: Fri, 11 Sep 2026 21:40:31 +0300 Subject: [PATCH 2/3] fix(docs): restore sidebar theme toggle row Place the theme toggle opposite the desktop search box while retaining the taller header needed by the wrapped project brief. Update the layout smoke expectations for the reserved toggle width. --- .github/doxygen-custom/logit-docs.css | 5 +++++ .github/scripts/docs-layout-smoke.cjs | 5 ++++- Doxyfile | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.github/doxygen-custom/logit-docs.css b/.github/doxygen-custom/logit-docs.css index 7e32006..37a8913 100644 --- a/.github/doxygen-custom/logit-docs.css +++ b/.github/doxygen-custom/logit-docs.css @@ -22,4 +22,9 @@ html { --top-height: 140px; } + + /* Keep the theme toggle opposite the search box, as in the original sidebar layout. */ + #logit-theme-toggle { + top: calc(100% + var(--spacing-small)); + } } diff --git a/.github/scripts/docs-layout-smoke.cjs b/.github/scripts/docs-layout-smoke.cjs index cb7c8c4..a0e0c0e 100644 --- a/.github/scripts/docs-layout-smoke.cjs +++ b/.github/scripts/docs-layout-smoke.cjs @@ -47,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")), @@ -81,9 +82,11 @@ async function inspectViewport(page, name, viewport) { `${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`); assert(layout.searchLeft >= layout.sidebarLeft - 1 && layout.searchRight <= layout.sidebarRight + 1, `${name}: search box is not contained by the sidebar`); diff --git a/Doxyfile b/Doxyfile index 0571451..4715b0d 100644 --- a/Doxyfile +++ b/Doxyfile @@ -1415,6 +1415,7 @@ HTML_STYLESHEET = HTML_EXTRA_STYLESHEET = .github/doxygen-awesome-css/doxygen-awesome.css \ .github/doxygen-awesome-css/doxygen-awesome-sidebar-only.css \ + .github/doxygen-awesome-css/doxygen-awesome-sidebar-only-darkmode-toggle.css \ .github/doxygen-custom/logit-docs.css # The HTML_EXTRA_FILES tag can be used to specify one or more extra images or From da83a4105cbb749e50266f750f7f0ea97f910072 Mon Sep 17 00:00:00 2001 From: Aster Seker Date: Fri, 11 Sep 2026 21:51:53 +0300 Subject: [PATCH 3/3] fix(docs): center sidebar theme toggle Align the desktop theme toggle center with the search box and make the layout smoke test enforce the shared vertical center. --- .github/doxygen-custom/logit-docs.css | 2 +- .github/scripts/docs-layout-smoke.cjs | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/doxygen-custom/logit-docs.css b/.github/doxygen-custom/logit-docs.css index 37a8913..b0c05e0 100644 --- a/.github/doxygen-custom/logit-docs.css +++ b/.github/doxygen-custom/logit-docs.css @@ -25,6 +25,6 @@ /* Keep the theme toggle opposite the search box, as in the original sidebar layout. */ #logit-theme-toggle { - top: calc(100% + var(--spacing-small)); + top: calc(100% + var(--spacing-small) + 1.5px); } } diff --git a/.github/scripts/docs-layout-smoke.cjs b/.github/scripts/docs-layout-smoke.cjs index a0e0c0e..873b2f0 100644 --- a/.github/scripts/docs-layout-smoke.cjs +++ b/.github/scripts/docs-layout-smoke.cjs @@ -68,9 +68,7 @@ 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}`); @@ -87,6 +85,10 @@ async function inspectViewport(page, name, viewport) { `${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`);