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;

public/docs/css/main.css

@@ -471,10 +471,6 @@ section {
   outline: none;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .text-white-hover:hover {
   color: #fff;
 }

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

@@ -1,31 +1,36 @@
 ---
 import Chevron from "@/icons/chevron.svg";
+import { docsVersionHref } from "@/lib/docs/versionHref";
 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", variant]}>
+  <div class="version__current">
+    <span>{currentVersion}</span>
     <Chevron />
-  </span>
+  </div>
   <ul class="version__dropdown">
     {versions
       .filter((v: string) => v !== version)
       .map((v: string) => {
         const support = site.data.version_support[v];
         return (
-          <li>
-            <a href={`/docs/${v}/`}>
+          <li class="version__option">
+            <a
+              class="version__link"
+              href={docsVersionHref(v, site.docs_version)}
+            >
               <div class="version__dropdown--item">
                 <span>{v}</span>
                 {support?.status === "unsupported" ? (
@@ -40,8 +45,10 @@ const versions = [...site.available_versions].reverse().slice(0, 10);
           </li>
         );
       })}
-    <li>
-      <a href="/docs/all">See more</a>
+    <li class="version__option">
+      <a class="version__link version__see-more" href="/docs/all">
+        See more
+      </a>
     </li>
   </ul>
 </div>
@@ -73,3 +80,149 @@ const versions = [...site.available_versions].reverse().slice(0, 10);
     initDocsVersionSelector();
   });
 </script>
+
+<style>
+  .version__selector {
+    cursor: pointer;
+    position: relative;
+
+    .version__current {
+      align-items: center;
+      border-radius: 8px;
+      color: #8d93a5;
+      display: inline-flex;
+      font-size: 14px;
+      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,
+        visibility 0.2s;
+      /* Keeps the links of the closed menu out of the tab order. */
+      visibility: hidden;
+      z-index: 2;
+    }
+
+    .version__option {
+      margin-bottom: 0;
+      text-align: center;
+
+      &:hover {
+        background-color: #fafbfe;
+      }
+    }
+
+    .version__link {
+      color: #8d93a5;
+      display: block;
+      font-size: 14px;
+      font-weight: 400;
+      padding: 8px 0;
+    }
+
+    .version__see-more {
+      color: #509ee3;
+      font-weight: 700;
+    }
+
+    .version__option:hover .version__link {
+      color: #509ee3;
+    }
+
+    .version__dropdown--item {
+      align-items: center;
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+      justify-content: space-between;
+      padding-inline: 1rem;
+    }
+
+    &.open {
+      .version__current {
+        background-color: #e4ecfb;
+        color: #509ee3;
+
+        :global(svg) {
+          rotate: 180deg;
+        }
+
+        :global(svg path) {
+          stroke: #509ee3;
+        }
+      }
+
+      .version__dropdown {
+        opacity: 1;
+        pointer-events: all;
+        scale: 1;
+        visibility: visible;
+      }
+    }
+
+    &.top-bar {
+      display: flex;
+
+      @media (max-width: 991.98px) {
+        display: none;
+      }
+
+      .version__dropdown {
+        right: 0;
+      }
+    }
+
+    &.inline {
+      display: inline-block;
+      margin-top: 32px;
+
+      @media (min-width: 992px) {
+        display: none;
+      }
+
+      .version__current {
+        padding-left: 0;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      &.open .version__current {
+        background-color: transparent;
+      }
+
+      .version__dropdown {
+        left: 0;
+      }
+    }
+  }
+</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} />
 

src/lib/docs/versionHref.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from "vitest";
+import { docsVersionHref } from "./versionHref";
+
+describe("docsVersionHref", () => {
+  test("links the current stable version to latest", () => {
+    expect(docsVersionHref("v0.63", "v0.63")).toBe("/docs/latest/");
+  });
+
+  test.each([
+    ["v0.64", "/docs/v0.64/"],
+    ["v0.58", "/docs/v0.58/"],
+  ])("links other versions to their own docs: %s", (version, href) => {
+    expect(docsVersionHref(version, "v0.63")).toBe(href);
+  });
+});

src/lib/docs/versionHref.ts

@@ -0,0 +1,6 @@
+// The current stable version links to /docs/latest/, so shared links stay
+// current after the next release instead of pinning a version number.
+export const docsVersionHref = (
+  version: string,
+  docsVersion: string,
+): string => (version === docsVersion ? "/docs/latest/" : `/docs/${version}/`);

src/pages/docs/all.astro

@@ -2,6 +2,7 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import NewDocsLayout from "@/layouts/NewDocsLayout.astro";
+import { docsVersionHref } from "@/lib/docs/versionHref";
 import { baseCtx } from "@/lib/liquid/liquidRenderer";
 
 const { site } = baseCtx;
@@ -51,7 +52,7 @@ const dirname = path.dirname(fileURLToPath(import.meta.url));
       return (
         <li>
           <p>
-            <a href={`/docs/${version}/`}>
+            <a href={docsVersionHref(version, site.docs_version)}>
               {version}{" "}
               {support.status === "unsupported" ? (
                 <span class="version__tag version__tag--unsupported">