diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js
index f2f244ff..8ceb0c32 100644
--- a/docs/javascripts/cookbooks-card.js
+++ b/docs/javascripts/cookbooks-card.js
@@ -59,7 +59,7 @@ document.addEventListener("DOMContentLoaded", function () {
             <div
                 class="author-container"
                 data-login="${authorData.login}-${elementIndex}"
-                style="margin-left: ${marginLeft}; z-index: ${zIndex};"
+                style="margin-left: ${marginLeft};"
             >
                 <a
                     href="https://github.com/${authorData.login}"
@@ -90,14 +90,17 @@ document.addEventListener("DOMContentLoaded", function () {
         ).join(',&nbsp;');
 
         let authorsHTML = `
-        <div class="authors">
+        <div class="authors" style="margin: 0;">
             ${authorAvatarsHTML}
             <div class="author-names">${authorNamesHTML}</div>
         </div>
         `;
 
         element.innerText = `
-            <div style="flex-direction: column; height: 100%; display: flex;
+            <div style="
+                display: grid !important;
+                grid-template-rows: auto;
+                height: 100%;
             font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
             <div style="display: flex; align-items: center;">
                 <span style="font-weight: 700; font-size: 1rem; color: ${theme.linkColor};">
@@ -105,13 +108,14 @@ document.addEventListener("DOMContentLoaded", function () {
                 </span>
             </div>
             ${authorsHTML}
-            <div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0; justify-content: space-between">
+            <div style="font-size: 12px; color: ${theme.color}; display: grid; grid-template-columns: 1fr 3fr; justify-content: space-between; gap: 1rem;">
                 <div style="display: flex; align-items: center;">
                 <img src="/assets/supervision-lenny.png" aria-label="stars" width="20" height="20" role="img" />
                 &nbsp;
                 <span style="margin-left: 4px">${version}</span>
                 </div>
-                <div style="display: flex; align-items: center; flex-wrap: wrap">
+                <div style="display: flex; align-items: center; flex-wrap: wrap; align-content: right;
+  gap: 0.1rem;">
                 ${labelHTML}
                 </div>
             </div>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 885bc575..d82db135 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -234,3 +234,9 @@ body[data-md-url$="/cookbooks/"] .md-content {
   width: 100%;
   margin: auto;
 }
+.md-search__scrollwrap {
+  width: 100% !important;
+}
+.md-nav--secondary .md-nav__title {
+  position: initial !important;
+}
diff --git a/docs/theme/partials/header.html b/docs/theme/partials/header.html
index a6d37ec6..3d760057 100644
--- a/docs/theme/partials/header.html
+++ b/docs/theme/partials/header.html
@@ -119,30 +119,38 @@
           });
           // on mouse out
           document.getElementById('resources-list').addEventListener('mouseout', function() {
-            // if not hovering over the sublist, uncheck the dropdown
+            // if not hovering over the sublist or the label, uncheck the dropdown
             // wait 1 sec
             setTimeout(function() {
-              if (!document.querySelector('.resources-sublist:hover')) {
+              if (!document.querySelector('.resources-sublist:hover') && !document.querySelector('#resources-list:hover')) {
                 document.getElementById('dropdown-resources').checked = false;
               }
-            }, 500);
+            }, 350);
           });
           // if mouseout of sublist, uncheck immediately
           document.querySelector('.resources-sublist').addEventListener('mouseout', function() {
-            document.getElementById('dropdown-resources').checked = false;
+            setTimeout(function() {
+              if (!document.querySelector('.resources-sublist:hover') && !document.querySelector('#resources-list:hover')) {
+                document.getElementById('dropdown-resources').checked = false;
+              }
+            }, 450);
           });
           document.getElementById('products-list').addEventListener('mouseout', function() {
             // if not hovering over the sublist, uncheck the dropdown
             // wait 1 sec
             setTimeout(function() {
-              if (!document.querySelector('.products-sublist:hover')) {
+              if (!document.querySelector('.products-sublist:hover') && !document.querySelector('#products-list:hover')) {
                 document.getElementById('dropdown-products').checked = false;
               }
             }, 500);
           });
           // if mouseout of sublist, uncheck immediately
           document.querySelector('.products-sublist').addEventListener('mouseout', function() {
-            document.getElementById('dropdown-products').checked = false;
+            setTimeout(function() {
+              if (!document.querySelector('.products-sublist:hover') && !document.querySelector('#products-list:hover')) {
+                document.getElementById('dropdown-products').checked = false;
+              }
+            }, 500);
           });
 
         </script>