From 214276bd06f9233a5e81cf40922358b1b13427d6 Mon Sep 17 00:00:00 2001 From: Xianpeng Shen Date: Tue, 29 Sep 2026 19:10:53 +0300 Subject: [PATCH] fix: stop the closed search box from covering the GitHub button On the home page, clicking the left part of the GitHub button in the header focused the search input and opened search, and hovering it showed the browser's "Please fill out this field" tooltip. Only the right part of the button opened GitHub. Closed, the search form is a 44px button, but Material's `.md-search__input` and `.md-search__suggest` keep their `2.2rem` side padding, so they are 88px wide and stick out 44px to the right. The input has `z-index: 2`, so the overflow sat on top of the GitHub button next to it. This clips the closed form with `overflow: hidden`; the open form (560px) is unchanged. Checked with `mkdocs serve` at 965, 1024 and 1440px wide: `elementFromPoint` across the GitHub button now returns the link at every point (before: the search input over its left 30%), the search icon still opens search, and a query still returns results. Inner pages don't use this header. --- docs/stylesheets/home.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css index eadb49d..3964b34 100644 --- a/docs/stylesheets/home.css +++ b/docs/stylesheets/home.css @@ -254,6 +254,15 @@ border-radius: 12px 12px 0 0; } + /* + * Closed, the form is a 44px button, but the input and the suggestion + * layer keep Material's padding and are 88px wide. Clip them so they do + * not cover the GitHub button next to it. + */ + [data-md-toggle="search"]:not(:checked) ~ .cl-header .md-search__form { + overflow: hidden; + } + .cl-header .md-search__input { color: var(--cl-ink); font-family: var(--cl-text);