hide tabs when searching

Author: amaksimovv

docs/stylesheets/extra.css

@@ -168,7 +168,8 @@
   font-size: 0.68rem;
   min-width: 0;
   white-space: nowrap;
-  overflow: visible;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .cs-tabs-inline .md-tabs__item--active .md-tabs__link,
@@ -177,6 +178,14 @@
   box-shadow: inset 0 -2px 0 #ff3d6c;
 }
 
+/* Collapse tabs when search is focused to prevent overlap */
+.cs-search-open .cs-header-tabs {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
 /* Footer: revert to theme defaults (remove custom padding hacks) */
 
 .cs-tabs-inline .md-tabs {

overrides/main.html

@@ -115,6 +115,20 @@
             function init() {
                 updateTabsLayout();
                 window.addEventListener("resize", debounce(updateTabsLayout, 150));
+
+                // Hide tabs when search is active to avoid overlaps.
+                const searchInput = document.querySelector(".md-search__input");
+                if (searchInput) {
+                    const onOpen = () => root.classList.add("cs-search-open");
+                    const onClose = () => root.classList.remove("cs-search-open");
+                    searchInput.addEventListener("focus", onOpen);
+                    searchInput.addEventListener("blur", onClose);
+                    document.addEventListener("keydown", (event) => {
+                        if (event.key === "Escape") {
+                            onClose();
+                        }
+                    });
+                }
             }
 
             if (document.readyState === "loading") {