fix #22492 (#22511)

* fix #22492

* Update nimdoc.css

remove scroll-y

* Update nimdoc.out.css

* Update nimdoc.css

* make it sticky again

* Update nimdoc.out.css

* danm sticky, use fixed

* Update nimdoc.out.css

* fix margin

* Update nimdoc.out.css

* make search input react to any change (not just keyboard events) according to https://github.com/nim-lang/Nim/pull/22511#issuecomment-1685218787

config/nimdoc.cfg

@@ -155,7 +155,7 @@ doc.body_toc_group = """
     </div>
     <div id="searchInputDiv">
       Search: <input type="search" id="searchInput"
-        onkeyup="search()" />
+        oninput="search()" />
     </div>
     $body_toc_groupsection
     $tableofcontents
@@ -189,7 +189,7 @@ doc.body_toc_group = """
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

doc/nimdoc.css

@@ -767,15 +767,16 @@ div.topic {
 
 div.search_results {
   background-color: var(--third-background);
-  margin: 3em;
+  margin: 3vh 5vw;
   padding: 1em;
   border: 1px solid #4d4d4d;
-  position: sticky;
-  top: 0;
+  position: fixed;
+  top: 10px;
   isolation: isolate;
+  max-width: calc(100vw - 6em);
   z-index: 1;
-  max-height: 100vh;
-  overflow-y: scroll; }
+  max-height: calc(100vh - 6em);
+  overflow-y: scroll;}
 
 div#global-links ul {
   margin-left: 0;

nimdoc/extlinks/project/expected/_._/util.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/extlinks/project/expected/main.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/extlinks/project/expected/sub/submodule.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/rst2html/expected/rst_examples.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/test_doctype/expected/test_doctype.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/test_out_index_dot_html/expected/index.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/testproject/expected/nimdoc.out.css

@@ -767,15 +767,16 @@ div.topic {
 
 div.search_results {
   background-color: var(--third-background);
-  margin: 3em;
+  margin: 3vh 5vw;
   padding: 1em;
   border: 1px solid #4d4d4d;
-  position: sticky;
-  top: 0;
+  position: fixed;
+  top: 10px;
   isolation: isolate;
+  max-width: calc(100vw - 6em);
   z-index: 1;
-  max-height: 100vh;
-  overflow-y: scroll; }
+  max-height: calc(100vh - 6em);
+  overflow-y: scroll;}
 
 div#global-links ul {
   margin-left: 0;

nimdoc/testproject/expected/subdir/subdir_b/utils.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by:

nimdoc/testproject/expected/testproject.html

@@ -37,7 +37,7 @@
       </ul>
     </div>
     <div id="searchInputDiv">
-      Search: <input type="search" id="searchInput" onkeyup="search()"/>
+      Search: <input type="search" id="searchInput" oninput="search()"/>
     </div>
     <div>
       Group by: