docs: restore full-width search layout

.github/doxygen-custom/header.html

@@ -24,6 +24,7 @@
 <!--END COPY_CLIPBOARD-->
 <script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script>
 <script type="text/javascript" src="$relpath^doxygen-awesome-paragraph-link.js"></script>
+<script type="text/javascript" src="$relpath^logit-docs-theme-toggle.js"></script>
 <script type="text/javascript">
 	DoxygenAwesomeDarkModeToggle.init()
 	DoxygenAwesomeParagraphLink.init()
@@ -81,6 +82,7 @@
   <!--END SEARCHENGINE-->
  </tbody>
 </table>
+<div id="logit-theme-toggle" aria-label="Color theme"></div>
 </div>
 <!--END TITLEAREA-->
 <!-- end header part -->

.github/doxygen-custom/logit-docs-theme-toggle.js

@@ -0,0 +1,29 @@
+(function () {
+    function moveThemeToggle() {
+        var target = document.getElementById("logit-theme-toggle");
+        var toggles = document.querySelectorAll("doxygen-awesome-dark-mode-toggle");
+        if (!target || toggles.length === 0) {
+            return;
+        }
+
+        if (toggles[0].parentNode !== target) {
+            target.appendChild(toggles[0]);
+        }
+        for (var i = 1; i < toggles.length; ++i) {
+            toggles[i].remove();
+        }
+    }
+
+    function scheduleMove() {
+        moveThemeToggle();
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+        moveThemeToggle();
+        window.addEventListener("resize", scheduleMove);
+
+        var observer = new MutationObserver(scheduleMove);
+        observer.observe(document.body, { childList: true, subtree: true });
+        window.setInterval(moveThemeToggle, 100);
+    });
+})();

.github/doxygen-custom/logit-docs.css

@@ -0,0 +1,29 @@
+/* Project-specific layout adjustments layered after Doxygen Awesome. */
+
+#titlearea {
+    position: relative;
+}
+
+#logit-theme-toggle {
+    position: absolute;
+    top: var(--spacing-medium);
+    right: var(--spacing-medium);
+    z-index: 2;
+    width: var(--searchbar-height);
+    height: var(--searchbar-height);
+}
+
+#logit-theme-toggle > doxygen-awesome-dark-mode-toggle {
+    margin: 0;
+}
+
+@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;
+    }
+}

.github/scripts/docs-layout-smoke.cjs

@@ -16,7 +16,12 @@ async function inspectViewport(page, name, viewport) {
     await page.setViewportSize(viewport);
     await page.goto(`${baseUrl}/index.html`, { waitUntil: "networkidle" });
     await page.locator("#MSearchBox").waitFor();
-    await page.locator("doxygen-awesome-dark-mode-toggle").waitFor();
+    await page.waitForFunction(() => {
+        const toggles = document.querySelectorAll("doxygen-awesome-dark-mode-toggle");
+        return toggles.length === 1 &&
+            Boolean(document.querySelector("#logit-theme-toggle > doxygen-awesome-dark-mode-toggle"));
+    });
+    await page.waitForTimeout(500);
 
     const layout = await page.evaluate(() => {
         const sideNav = document.querySelector("#side-nav")?.getBoundingClientRect();
@@ -33,6 +38,14 @@ async function inspectViewport(page, name, viewport) {
             searchRight: search?.right ?? 0,
             toggleLeft: toggle?.left ?? 0,
             toggleRight: toggle?.right ?? 0,
+            searchTop: search?.top ?? 0,
+            searchBottom: search?.bottom ?? 0,
+            toggleTop: toggle?.top ?? 0,
+            toggleBottom: toggle?.bottom ?? 0,
+            searchWidth: search?.width ?? 0,
+            spacingMedium: parseFloat(getComputedStyle(root).getPropertyValue("--spacing-medium")),
+            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")),
         };
     });
@@ -45,14 +58,27 @@ async function inspectViewport(page, name, viewport) {
     assert(within(layout.toggleLeft, 0, layout.viewportWidth) &&
         within(layout.toggleRight, 0, layout.viewportWidth),
         `${name}: dark-mode toggle is outside the viewport`);
-    assert(layout.searchRight <= layout.toggleLeft + 1 || layout.toggleRight <= layout.searchLeft + 1,
+    const separated = layout.searchRight <= layout.toggleLeft + 1 ||
+        layout.toggleRight <= layout.searchLeft + 1 ||
+        layout.searchBottom <= layout.toggleTop + 1 ||
+        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,
+        `${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 (name === "desktop") {
+    if (viewport.width >= 768) {
         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;
+        assert(layout.searchWidth >= expectedSearchWidth - 2,
+            `${name}: search box is too narrow (${layout.searchWidth}px; expected about ${expectedSearchWidth}px)`);
         assert(layout.searchLeft >= layout.sidebarLeft - 1 &&
             layout.searchRight <= layout.sidebarRight + 1,
             `${name}: search box is not contained by the sidebar`);
@@ -69,6 +95,7 @@ async function inspectViewport(page, name, viewport) {
     try {
         const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
         await inspectViewport(page, "desktop", { width: 1440, height: 900 });
+        await inspectViewport(page, "wide-desktop", { width: 1745, height: 864 });
         await inspectViewport(page, "mobile", { width: 390, height: 844 });
     } finally {
         await browser.close();

Doxyfile

@@ -1415,7 +1415,8 @@ 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-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
 # other source files which should be copied to the HTML output directory. Note
@@ -1426,7 +1427,8 @@ HTML_EXTRA_STYLESHEET  = .github/doxygen-awesome-css/doxygen-awesome.css \
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
 HTML_EXTRA_FILES       = .github/doxygen-awesome-css/doxygen-awesome-darkmode-toggle.js \
-                         .github/doxygen-awesome-css/doxygen-awesome-paragraph-link.js
+                         .github/doxygen-awesome-css/doxygen-awesome-paragraph-link.js \
+                         .github/doxygen-custom/logit-docs-theme-toggle.js
 
 # The HTML_COLORSTYLE tag can be used to specify if the generated HTML output
 # should be rendered with a dark or light theme.