Fix mobile version picker

public/docs/css/docs-local.css

@@ -1,20 +1,6 @@
 /* because stylesheets mainly live in the marketing repo, this is a subset of the styles
  * that are specific to this repo, pending a larger refactor to move all docs-specific styles into this repo. */
 
-.bootstrap .learn .version__dropdown {
-  width: auto !important;
-
-  .version__dropdown--item {
-    align-items: center;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.5rem;
-    justify-content: space-between;
-    padding-inline: 1rem;
-    text-align: left;
-  }
-}
-
 .version__tag {
   border-radius: 4px;
   font-size: 10px;

src/components/chrome/TocToggle.astro

@@ -7,9 +7,7 @@
     fill="currentColor"
     aria-hidden="true"
   >
-    <path
-      d="M12,15.5c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.4,12.3,15.5,12,15.5z"
-    ></path>
+    <path d="M12,15.5c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.4,12.3,15.5,12,15.5z"></path>
   </svg>
 </button>
 <nav id="page-toc" popover aria-label="On this page">

src/components/chrome/TopBar.astro

@@ -18,9 +18,11 @@ interface Props {
   };
   showBreadcrumb: boolean;
   showNavToggle: boolean;
+  showVersionSelector: boolean;
 }
 
-const { page, showBreadcrumb, showNavToggle } = Astro.props;
+const { page, showBreadcrumb, showNavToggle, showVersionSelector } =
+  Astro.props;
 ---
 
 <div id={TOP_BAR_ID}>
@@ -31,7 +33,9 @@ const { page, showBreadcrumb, showNavToggle } = Astro.props;
     </div>
 
     <div>
-      <VersionSelector version={page.version} />
+      {showVersionSelector && (
+        <VersionSelector version={page.version} variant="top-bar" />
+      )}
       <a href="/releases" class="whats-new">
         <Stars />
         What’s new
@@ -73,11 +77,6 @@ const { page, showBreadcrumb, showNavToggle } = Astro.props;
       content: none;
     }
 
-    :global(.version__selector) {
-      display: flex;
-      margin-top: 0;
-    }
-
     :global(.trail) {
       margin-left: 64px;
     }
@@ -137,10 +136,6 @@ const { page, showBreadcrumb, showNavToggle } = Astro.props;
         display: contents;
       }
 
-      :global(.version__selector) {
-        display: none;
-      }
-
       :global(.docs-nav-toggle),
       :global(.toc-toggle) {
         padding: 8px;

src/components/chrome/VersionSelector.astro

@@ -4,20 +4,21 @@ import { baseCtx } from "@/lib/liquid/liquidRenderer";
 
 type Props = {
   version?: string;
+  variant: "top-bar" | "inline";
 };
 
-const { version } = Astro.props;
+const { version, variant } = Astro.props;
 const { site } = baseCtx;
 
 const currentVersion = version === "latest" ? site.docs_version : version;
 const versions = [...site.available_versions].reverse().slice(0, 10);
 ---
 
-<div class="version__selector cursor-pointer">
-  <span class="version__current">
-    {currentVersion}
+<div class:list={["version__selector", "cursor-pointer", variant]}>
+  <div class="version__current">
+    <span>{currentVersion}</span>
     <Chevron />
-  </span>
+  </div>
   <ul class="version__dropdown">
     {versions
       .filter((v: string) => v !== version)
@@ -73,3 +74,147 @@ const versions = [...site.available_versions].reverse().slice(0, 10);
     initDocsVersionSelector();
   });
 </script>
+
+<style>
+  /* Doubled to outrank the legacy `.bootstrap .learn__post a` / `li` rules. */
+  .version__selector.version__selector {
+    position: relative;
+
+    &.top-bar {
+      display: flex;
+
+      @media (max-width: 991.98px) {
+        display: none;
+      }
+
+      .version__dropdown {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    &.inline {
+      display: inline-block;
+      margin: 32px 0 0;
+
+      @media (min-width: 992px) {
+        display: none;
+      }
+
+      .version__current {
+        background-color: #fff;
+        border: 1px solid rgba(198, 201, 210, 0.5);
+
+        &:hover {
+          border-color: #c2daf0;
+        }
+      }
+
+      .version__dropdown {
+        left: 0;
+        right: auto;
+      }
+    }
+
+    .version__current {
+      align-items: center;
+      border-radius: 8px;
+      color: #8d93a5;
+      display: inline-flex;
+      font-size: 14px;
+      gap: 0;
+      padding: 10px 0 12px 12px;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        background-color: #e4ecfb;
+      }
+
+      :global(svg) {
+        height: 12px;
+        margin-top: 2px;
+      }
+
+      :global(svg path) {
+        stroke: #8d93a5;
+      }
+    }
+
+    .version__dropdown {
+      background: #fff;
+      border-radius: 0.25rem;
+      box-shadow: 0 3px 24px rgba(0, 0, 0, 0.08);
+      list-style-type: none;
+      margin-top: 0;
+      opacity: 0;
+      overflow: hidden;
+      padding: 0;
+      pointer-events: none;
+      position: absolute;
+      scale: 0.97;
+      top: 100%;
+      transition:
+        scale 0.2s ease-in-out,
+        opacity 0.2s ease-in-out;
+      z-index: 2;
+
+      li {
+        margin-bottom: 0;
+        text-align: center;
+
+        &:hover {
+          background-color: #fafbfe;
+        }
+      }
+
+      li > a {
+        color: #8d93a5;
+        display: block;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 8px 0;
+      }
+
+      li:hover > a,
+      li:last-child > a {
+        color: #509ee3;
+      }
+
+      li:last-child > a {
+        font-weight: 700;
+      }
+    }
+
+    .version__dropdown--item {
+      align-items: center;
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+      justify-content: space-between;
+      padding-inline: 1rem;
+      text-align: left;
+    }
+
+    &.open {
+      .version__current {
+        background-color: #e4ecfb;
+        border-color: #c2daf0;
+        color: #509ee3;
+
+        :global(svg) {
+          rotate: 180deg;
+        }
+
+        :global(svg path) {
+          stroke: #509ee3;
+        }
+      }
+
+      .version__dropdown {
+        opacity: 1;
+        pointer-events: all;
+        scale: 1;
+      }
+    }
+  }
+</style>

src/layouts/NewDocsLayout.astro

@@ -26,7 +26,8 @@ const { page, dirname } = Astro.props;
 
 const parts = Astro.url.pathname.split("/");
 const isHomePage = parts[3] === "index" || !parts[3];
-const showBreadcrumb = !isHomePage || parts[2] === "all";
+const isAllVersionsPage = parts[2] === "all";
+const showBreadcrumb = !isHomePage || isAllVersionsPage;
 const { categories } = getNavForVersion(
   page.latest ? "latest" : (page.version ?? "latest"),
 );
@@ -43,11 +44,18 @@ const unify = UNIFY_ENABLED_PAGES.includes(page.url);
       <LeftSidebar url={page.url} {categories} />
 
       <article class="learn__post learn__article">
-        <TopBar {page} {showBreadcrumb} {showNavToggle} />
+        <TopBar
+          {page}
+          {showBreadcrumb}
+          {showNavToggle}
+          showVersionSelector={!isAllVersionsPage}
+        />
 
         <div class="learn__post__content">
           {showBreadcrumb && <Breadcrumb page={page} variant="inline" />}
-          {!showBreadcrumb && <VersionSelector version={page.version} />}
+          {!showBreadcrumb && (
+            <VersionSelector version={page.version} variant="inline" />
+          )}
 
           <VersionNotice version={page.version} />