fix: searchbar expansion, preserve title and make the searchbar expansion as an overlay

Signed-off-by: codeEvolveZenith345 <suntiwari3495@gmail.com>

Author: codeEvolveZenith345

docs/stylesheets/extra.css

@@ -693,4 +693,26 @@ article.md-search-result__article p:not(.md-search-result__meta) {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
+}
+
+@media screen and (min-width: 76.25em) {
+  
+  /* When search is active, make it float and expand */
+  [data-md-toggle="search"]:checked ~ .md-header .md-search {
+    position: absolute;
+    right: 3rem;
+    width: 50%;
+    z-index: 100;
+  }
+  
+  /* Make search form expand fully */
+  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
+    width: 100%;
+  }
+  
+  /* Make search input expand fully */
+  [data-md-toggle="search"]:checked ~ .md-header .md-search__input {
+    width: 100%;
+  }
+
 }