docs: optimize language switch functionality and styles for better responsiveness

docs/_ext/language_switch.py

@@ -21,13 +21,23 @@ def inject_language_switch(app, doctree, docname):
         f'<a class="lang-current" href="#">{current_label}</a>'
         '</div>'
         '<script>(function(){'
+        "function getDockHost(){"
+        "  if(window.matchMedia && window.matchMedia('(max-width: 768px)').matches){"
+        "    return document.body;"
+        "  }"
+        "  return document.querySelector('.wy-nav-side') || document.body;"
+        "}"
         "function ensureDock(){"
         "  var dock=document.querySelector('[data-docs-switch-dock]');"
-        "  if(dock) return dock;"
+        "  var host=getDockHost();"
-        "  dock=document.createElement('div');"
+        "  if(!dock){"
-        "  dock.className='docs-floating-switches';"
+        "    dock=document.createElement('div');"
-        "  dock.setAttribute('data-docs-switch-dock','');"
+        "    dock.className='docs-floating-switches';"
-        "  document.body.appendChild(dock);"
+        "    dock.setAttribute('data-docs-switch-dock','');"
+        "  }"
+        "  if(dock.parentNode!==host){"
+        "    host.appendChild(dock);"
+        "  }"
         "  return dock;"
         "}"
         "function mountSwitch(){"
@@ -44,6 +54,7 @@ def inject_language_switch(app, doctree, docname):
         "}"
         "if(document.body){ mountSwitch(); }"
         "else { document.addEventListener('DOMContentLoaded', mountSwitch, {once:true}); }"
+        "window.addEventListener('resize', mountSwitch, {passive:true});"
         '})();</script>'
     )
     doctree.insert(0, nodes.raw('', html, format='html'))

docs/_ext/static/version_switch.css

@@ -1,31 +1,42 @@
 .docs-floating-switches {
-    position: fixed;
+    position: absolute;
-    left: 24px;
+    left: 0;
-    bottom: 24px;
+    right: 0;
-    z-index: 1100;
+    bottom: 0;
+    z-index: 20;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
-    gap: 0.55rem;
+    gap: 0;
-    padding: 0.85rem 0.95rem;
+    width: 100%;
-    border: 1px solid rgba(82, 82, 91, 0.42);
+    max-width: none;
-    border-radius: 4px;
+    padding: 0;
-    background: rgba(195, 195, 201, 0.96);
+    border-top: 1px solid rgba(82, 82, 91, 0.48);
-    box-shadow: 0 18px 38px rgba(24, 24, 27, 0.26);
+    border-radius: 0;
-    backdrop-filter: blur(14px);
+    background: #a8a8a8;
-    max-width: calc(100vw - 48px);
+    box-shadow: none;
+    backdrop-filter: none;
 }
 
 .docs-floating-switches__item {
     width: 100%;
-    max-width: min(220px, calc(100vw - 48px));
+    max-width: none;
+}
+
+.docs-floating-switches .lang-switch {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 3rem;
+    padding: 0.95rem 1rem !important;
 }
 
 .docs-version-switch {
     display: grid;
     gap: 0.5rem;
-    min-width: 192px;
+    min-width: 0;
-    padding: 0.75rem 0 0;
+    width: 100%;
+    padding: 0.95rem 1rem 1rem;
     border-top: 1px solid rgba(82, 82, 91, 0.28);
 }
 
@@ -58,9 +69,9 @@
     width: 100%;
     min-height: 2.4rem;
     padding: 0 0.85rem;
-    border: 1px solid #8a8a93;
+    border: 1px solid #7f7f88;
-    border-radius: 4px;
+    border-radius: 0;
-    background: #b1b1b9;
+    background: #97979f;
     color: #18181b;
     font-size: 0.95rem;
     font-weight: 600;
@@ -71,22 +82,41 @@
     border-color: #3f3f46;
 }
 
+.wy-nav-side {
+    position: fixed;
+}
+
+.wy-nav-side .wy-side-scroll {
+    padding-bottom: 10.5rem;
+    box-sizing: border-box;
+}
+
 @media (max-width: 768px) {
     .docs-floating-switches {
+        position: fixed;
         left: 12px;
+        right: auto;
         bottom: 12px;
-        gap: 0.55rem;
+        width: auto;
-        padding: 0.75rem 0.85rem;
+        min-width: 176px;
         max-width: calc(100vw - 24px);
+        border: 1px solid rgba(82, 82, 91, 0.42);
     }
 
     .docs-floating-switches__item {
         max-width: calc(100vw - 24px);
     }
 
+    .docs-floating-switches .lang-switch {
+        min-height: 0;
+        justify-content: flex-start !important;
+        padding: 0.75rem 0.85rem !important;
+    }
+
     .docs-version-switch {
         min-width: 156px;
-        padding-top: 0.65rem;
+        width: auto;
+        padding: 0.75rem 0.85rem 0.85rem;
     }
 
     .docs-version-switch__header {
@@ -97,4 +127,8 @@
         min-height: 2.2rem;
         font-size: 0.88rem;
     }
+
+    .wy-nav-side .wy-side-scroll {
+        padding-bottom: 0;
+    }
 }

docs/_ext/static/version_switch.js

@@ -1,14 +1,26 @@
 (function () {
+  function getDockHost() {
+    if (window.matchMedia && window.matchMedia("(max-width: 768px)").matches) {
+      return document.body;
+    }
+
+    return document.querySelector(".wy-nav-side") || document.body;
+  }
+
   function ensureDock() {
     var dock = document.querySelector("[data-docs-switch-dock]");
-    if (dock) {
+    var host = getDockHost();
-      return dock;
+
+    if (!dock) {
+      dock = document.createElement("div");
+      dock.className = "docs-floating-switches";
+      dock.setAttribute("data-docs-switch-dock", "");
+    }
+
+    if (dock.parentNode !== host) {
+      host.appendChild(dock);
     }
 
-    dock = document.createElement("div");
-    dock.className = "docs-floating-switches";
-    dock.setAttribute("data-docs-switch-dock", "");
-    document.body.appendChild(dock);
     return dock;
   }
 
@@ -117,7 +129,12 @@
       return;
     }
 
-    ensureDock().appendChild(widget);
+    function mountWidget() {
+      ensureDock().appendChild(widget);
+    }
+
+    mountWidget();
+    window.addEventListener("resize", mountWidget, { passive: true });
 
     var locationInfo = parseLocation(config);
     if (!locationInfo) {