From ddd2d8e5d27dc4e5a5f441d2ca6f00990b5a0c11 Mon Sep 17 00:00:00 2001
From: davidekete <eketedavid@gmail.com>
Date: Thu, 2 Oct 2025 15:40:12 +0100
Subject: [PATCH] docs: fix mixed search bar

---
 docs/_static/css/custom.css | 63 +++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 974f5ccb2c..a71767d9b9 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -105,7 +105,7 @@ body,
   width: 100%;
 }
 
-.wy-menu-vertical>ul {
+.wy-menu-vertical > ul {
   margin: 0;
   margin-bottom: 3rem;
 }
@@ -129,7 +129,7 @@ body,
   position: relative;
 }
 
-.wy-menu-vertical li.current>a {
+.wy-menu-vertical li.current > a {
   font-weight: 400 !important;
 }
 
@@ -177,27 +177,27 @@ ul.current ul,
   display: block !important;
 }
 
-.wy-menu-vertical li>a {
+.wy-menu-vertical li > a {
   margin-inline-end: var(--space-vertical-menu-pad-x) !important;
 }
 
-.wy-menu-vertical .toctree-l1>a {
+.wy-menu-vertical .toctree-l1 > a {
   margin-inline-start: var(--space-vertical-menu-pad-x) !important;
 }
 
-.wy-menu-vertical .toctree-l2>a {
+.wy-menu-vertical .toctree-l2 > a {
   margin-inline-start: calc(1.5 * var(--space-vertical-menu-pad-x)) !important;
 }
 
-.wy-menu-vertical .toctree-l3>a {
+.wy-menu-vertical .toctree-l3 > a {
   margin-inline-start: calc(2 * var(--space-vertical-menu-pad-x)) !important;
 }
 
-.wy-menu-vertical .toctree-l4>a {
+.wy-menu-vertical .toctree-l4 > a {
   margin-inline-start: calc(2.5 * var(--space-vertical-menu-pad-x)) !important;
 }
 
-.wy-menu-vertical .toctree-l5>a {
+.wy-menu-vertical .toctree-l5 > a {
   margin-inline-start: calc(3 * var(--space-vertical-menu-pad-x)) !important;
 }
 
@@ -227,7 +227,7 @@ ul.wy-breadcrumbs {
 .wy-breadcrumbs *::after {
   font-size: var(--size-body);
   font-family: "Helvetica", sans-serif;
-  color: var(--color-primary)
+  color: var(--color-primary);
 }
 
 .wy-breadcrumbs a.icon-home::before {
@@ -355,14 +355,18 @@ nav.wy-nav-shift {
 /* Remove background from the search container */
 .wy-side-nav-search {
   display: flex;
-  flex-direction: row-reverse;
-  align-items: end;
+  flex-direction: column;
+  /* align-items: end; */
   background: none !important;
   margin: 5rem 0 0;
   padding: 0 var(--space-vertical-menu-pad-x);
   margin: 2.875rem 0 0 !important;
 }
 
+.wy-side-nav-search switch-menus > * {
+  flex-basis: 50%;
+}
+
 .wy-side-scroll hr {
   margin: 1.5rem 0.5rem;
   border-color: var(--color-background);
@@ -466,7 +470,7 @@ button.color-toggle {
 
 /* Primary color for icon if menu open */
 .unified-wrapper.menu-open .mobile-menu-button,
-.inner-header:has(.theme-dropdown-menu[aria-expanded=true]) .theme-button {
+.inner-header:has(.theme-dropdown-menu[aria-expanded="true"]) .theme-button {
   color: var(--color-primary);
 }
 
@@ -486,8 +490,8 @@ button.color-toggle {
   padding: 1rem 0.5rem !important;
 }
 
-.theme-dropdown-menu[aria-expanded=false] {
-  display: none
+.theme-dropdown-menu[aria-expanded="false"] {
+  display: none;
 }
 
 .color-toggle-icon {
@@ -654,7 +658,6 @@ body.wy-body-for-nav {
 .unified-header .nav-link:hover {
   color: var(--color-primary);
   box-shadow: 0 2px 0 var(--color-primary);
-
 }
 
 .unified-header .nav-link:focus {
@@ -760,7 +763,7 @@ a.skip-to-content:focus {
   color: var(--color-primary);
 }
 
-  .language-menu-wrapper .language-menu-items a:hover {
+.language-menu-wrapper .language-menu-items a:hover {
   color: var(--color-hover);
 }
 
@@ -774,8 +777,10 @@ button#language-button {
   text-transform: uppercase;
 }
 
-.language-menu-wrapper:has(button.language-button[aria-expanded=false]) .language-menu-items,
-.nav-dropdown:has(button.dropdown-button[aria-expanded=false]) .dropdown-items {
+.language-menu-wrapper:has(button.language-button[aria-expanded="false"])
+  .language-menu-items,
+.nav-dropdown:has(button.dropdown-button[aria-expanded="false"])
+  .dropdown-items {
   display: none;
 }
 
@@ -804,8 +809,9 @@ button#language-button {
   margin-inline-start: 0.375rem;
 }
 
-.language-menu-wrapper:has(button.language-button[aria-expanded=true]) .chevron-icon,
-.nav-dropdown:has(button.dropdown-button[aria-expanded=true]) .chevron-icon {
+.language-menu-wrapper:has(button.language-button[aria-expanded="true"])
+  .chevron-icon,
+.nav-dropdown:has(button.dropdown-button[aria-expanded="true"]) .chevron-icon {
   transform: scaleY(-1);
   transition: transform 100ms;
 }
@@ -852,7 +858,7 @@ button#language-button {
 }
 
 /* Force image backgrounds to white until all fixed for dark modes */
-[role=main].document img {
+[role="main"].document img {
   background-color: white;
 }
 
@@ -902,16 +908,15 @@ span.fa.fa-book {
  */
 
 @media (max-width: 768px) {
-
   /* Menu closed styles */
   .unified-header .nav-link {
     display: none;
   }
-  
+
   .unified-header .inner-header {
     padding-inline: 1rem;
   }
-  
+
   #language-button {
     display: flex;
     margin-inline-start: 1rem;
@@ -967,14 +972,18 @@ span.fa.fa-book {
 
 /* 1) Keep images small and inside the card */
 .plugin-card .sd-card-img-top {
-  max-height: 96px;      /* try 80–120px to taste */
+  max-height: 96px; /* try 80–120px to taste */
   width: 100%;
   object-fit: contain;
 }
 
 /* 2) Make cards tighter vertically */
-.plugin-card .sd-card-body { padding: .6rem .75rem; }
-.plugin-card .sd-card-body p { margin-bottom: .35rem; }
+.plugin-card .sd-card-body {
+  padding: 0.6rem 0.75rem;
+}
+.plugin-card .sd-card-body p {
+  margin-bottom: 0.35rem;
+}
 
 /* 3) clamp long intros to 2 lines */
 .clamp-2 {