Fix mobile version picker by losrebellos · Pull Request #1373 · metabase/docs.metabase.github.io

losrebellos · 2026-10-06T09:59:23Z

Closes https://linear.app/metabase/issue/GRO-1054/docs-version-picker-has-no-background-on-mobile.

What's in

Version selector
- Background colour + border on mobile
- Dropdown position updates for mobile + desktop
No version selector for /docs/all
Fix
- HTML tagging
- When targeting the latest version of the docs in the dropdown, it will be in the url: /docs/latest/...
What's new button breakpoint updates for display

Mobile

Desktop

Docs listing page

How to test

Test on mobile and desktop: https://docs-pr-1373-metaboat.vercel.app/docs/latest
No version selector: https://docs-pr-1373-metaboat.vercel.app/docs/all

Dropdown

Go to https://docs-pr-1373-metaboat.vercel.app/docs/v0.58/
Select version 0.63 (latest one in the branch atm) in the dropdown
Now the url starts with /docs/latest

linear · 2026-10-06T09:59:28Z

GRO-1054

github-actions · 2026-10-06T09:59:40Z

Commit b5e5126 is live at https://docs-pr-1373-metaboat.vercel.app

Project	Deployment	Actions	Updated (UTC)
docs	🟢 Ready	Preview	Oct 9, 2026 4:09pm

Deployed to Vercel via GitHub Actions

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # src/components/chrome/TopBar.astro # src/layouts/NewDocsLayout.astro

Copilot

Copilot review overview

🟡 Changes recommended

Mobile pages can lack a version picker, and responsive thresholds can briefly show duplicate pickers.

Review effort: Lite
Findings: 1

Open (1)

Overlapping breakpoints show duplicate version pickers · New

What changed in this PR

This pull request improves the docs version picker across mobile and desktop layouts.

Changes:

Adds responsive picker styling and dropdown positioning.
Hides the selector on /docs/all.
Updates top-bar rendering and reformats the TOC icon.

File	Summary
`src/layouts/NewDocsLayout.astro`	Controls selector visibility; mobile picker is missing on nested pages.
`src/components/chrome/VersionSelector.astro`	Updates responsive styling; breakpoint overlap can briefly show duplicate pickers.
`src/components/chrome/TopBar.astro`	Conditionally renders the selector; mobile hiding can remove the only picker.
`src/components/chrome/TocToggle.astro`	Reformats the TOC SVG markup.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Correct media query to use min-width: 992px instead of 992.02px. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # public/docs/css/styles.css

bpander · 2026-10-08T14:06:49Z

+
+<style>
+  /* The ids outrank the legacy `.bootstrap .learn__post a` / `li` rules. */
+  :is(#version-selector-top-bar, #version-selector-inline) {


I think the peripheral changes on this PR all make sense, but I'm actually not a huge fan of the mobile bordered version. Maybe it's just me. It's pretty in-your-face and I'm not sure why we need one there when we're fine with a borderless dropdown basically right next to it (the "On this page" trigger).

If other people prefer this version, I wouldn't die on this hill. My taste is not impeccable. It's actually quite peccable.

Great question!
I've added a background and a border because it feels lots and it is not aligned with the rest of the content atm, see screenshot below.

Let's have some UI feedback actually 👌
WDYT @jrayski ?

You're right, it isn't aligned with the rest of the content, so I'd start by fixing that.

You could also try moving it closer to the "Metabase documentation" heading.

I agree we shouldn't give it too much emphasis, since it's a secondary function on the page.

@jrayski Happy to remove the background + border and align it but how do you want the dropdown to open?
Align or not aligned with the content?

Left-aligned with the content.

@jrayski WDYT about that on mobile?

Almost there, you can remove that background on hover on mobile. Bring it closer to how we handle "On this page".

Copilot

🔵 Needs a closer look

The version selector has unresolved accessibility, styling, duplicate-option, and dropdown-sizing issues.

0 open findings

1 resolved since last review

Overlapping breakpoints show duplicate version pickers

🧠 Review effort: Lite

bpander

Good improvements all around. Nice work!

bpander · 2026-10-09T13:52:22Z

 </script>
+
+<style>
+  /* The ids outrank the legacy `.bootstrap .learn__post a` / `li` rules.


nit: if you want a less gnarly selector, I think you can also just double the class name, e.g.

.version__selector.version__selector {

EDIT: Actually, I'm not 100% sure why the gnarly selector is needed. I don't see any issues if just use .version__selector. I might just be missing what it was intended to fix.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # public/docs/css/main.css # public/docs/css/styles.css

losrebellos added 4 commits October 6, 2026 10:36

WIP

0262d87

Styles updated

e3d51dc

Remove version selector in /docs/all

5117de0

Misc

87d4cdb

losrebellos self-assigned this Oct 6, 2026

losrebellos added 4 commits October 6, 2026 13:59

From feedback

0733c6c

Merge branch 'master' into losrebellos/fix-mobile-version-picker

dc36798

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # src/components/chrome/TopBar.astro # src/layouts/NewDocsLayout.astro

Misc

9077f9f

MArgin fix

054c8e9

losrebellos marked this pull request as ready for review October 6, 2026 12:49

losrebellos requested a lite review from Copilot October 6, 2026 12:49

Copilot started reviewing on behalf of losrebellos October 6, 2026 12:49 View session

Copilot AI reviewed Oct 6, 2026

View reviewed changes

Comment thread src/components/chrome/VersionSelector.astro Outdated

Fix media query for version selector visibility

fce8fd1

Correct media query to use min-width: 992px instead of 992.02px. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

losrebellos marked this pull request as draft October 6, 2026 13:04

Version picker cleanups

60bcf5c

losrebellos marked this pull request as ready for review October 6, 2026 16:45

losrebellos requested a review from a team October 6, 2026 16:52

losrebellos marked this pull request as draft October 6, 2026 16:53

losrebellos removed the request for review from a team October 6, 2026 16:54

cleanups

c7f9a1c

losrebellos requested a review from tmashara October 7, 2026 13:36

losrebellos added 2 commits October 7, 2026 16:25

Url to latest when targeted by the dropdown

273e78e

Merge branch 'master' into losrebellos/fix-mobile-version-picker

92c928d

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # public/docs/css/styles.css

losrebellos marked this pull request as ready for review October 7, 2026 15:00

losrebellos requested a review from a team October 7, 2026 15:00

bpander reviewed Oct 8, 2026

View reviewed changes

losrebellos requested a review from jrayski October 8, 2026 16:02

losrebellos added 2 commits October 9, 2026 14:50

Misc

754e502

Margin updated

f20035d

losrebellos requested review from bpander and a lite review from Copilot October 9, 2026 13:08

Copilot started reviewing on behalf of losrebellos October 9, 2026 13:16 View session

Copilot AI reviewed Oct 9, 2026

View reviewed changes

bpander approved these changes Oct 9, 2026

View reviewed changes

bpander reviewed Oct 9, 2026

View reviewed changes

losrebellos added 2 commits October 9, 2026 16:20

Remove id

c4b9296

Merge branch 'master' into losrebellos/fix-mobile-version-picker

b5e5126

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> # Conflicts: # public/docs/css/main.css # public/docs/css/styles.css

Conversation

losrebellos commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's in

Mobile

Desktop

Docs listing page

How to test

Dropdown

Uh oh!

linear Bot commented Oct 6, 2026

Uh oh!

github-actions Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

bpander Oct 8, 2026

Choose a reason for hiding this comment

Uh oh!

losrebellos Oct 8, 2026

Choose a reason for hiding this comment

Uh oh!

jrayski Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

losrebellos Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

jrayski Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

losrebellos Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jrayski Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

bpander left a comment

Choose a reason for hiding this comment

Uh oh!

bpander Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

losrebellos Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

losrebellos commented Oct 6, 2026 •

edited

Loading

github-actions Bot commented Oct 6, 2026 •

edited

Loading

losrebellos Oct 9, 2026 •

edited

Loading

bpander Oct 9, 2026 •

edited

Loading