From 1a4cc53dfbdc579a76fde54f11602916c42bc830 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Thu, 18 Dec 2025 15:34:07 -0800 Subject: [PATCH 1/3] Use page-level version selector --- components/blocks/autofunction.js | 113 +++---------- components/blocks/autofunction.module.css | 44 ----- components/layouts/container.module.css | 5 + components/layouts/globalTemplate.js | 4 +- components/navigation/header.js | 4 +- components/navigation/header.module.css | 22 ++- components/utilities/versionSelector.js | 126 ++++++++++++++ .../utilities/versionSelector.module.css | 154 ++++++++++++++++++ pages/[...slug].js | 51 +++--- 9 files changed, 343 insertions(+), 180 deletions(-) create mode 100644 components/utilities/versionSelector.js create mode 100644 components/utilities/versionSelector.module.css diff --git a/components/blocks/autofunction.js b/components/blocks/autofunction.js index 05062a554..b56022f6f 100644 --- a/components/blocks/autofunction.js +++ b/components/blocks/autofunction.js @@ -1,10 +1,8 @@ import React, { useEffect, useState, useRef } from "react"; -import classNames from "classnames"; import Table from "./table"; import { H2, H3 } from "./headers"; import Warning from "./warning"; import Deprecation from "./deprecation"; -import { withRouter, useRouter } from "next/router"; import Prism from "prismjs"; import "prismjs/components/prism-python"; import "prismjs/plugins/line-numbers/prism-line-numbers"; @@ -17,12 +15,10 @@ import getConfig from "next/config"; const { publicRuntimeConfig } = getConfig(); import styles from "./autofunction.module.css"; -import { looksLikeVersionAndPlatformString } from "../../lib/next/utils"; import { getThemedUrl, getThemeFromDOM } from "../../lib/next/ThemeContext"; const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION; const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION; -const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST; const cleanHref = (name) => { return String(name).replace(/\./g, "").replace(/\s+/g, "-"); @@ -37,10 +33,8 @@ const Autofunction = ({ deprecated, deprecatedText, oldStreamlitFunction, - goToLatest, }) => { const blockRef = useRef(); - const router = useRouter(); const [isHighlighted, setIsHighlighted] = useState(false); const currentNumericVersion = version == DEFAULT_VERSION ? LATEST_VERSION : version; @@ -104,56 +98,6 @@ const Autofunction = ({ setIsHighlighted(true); }; - const VersionSelector = ({ currentNumericVersion, handleSelectVersion }) => { - const selectClass = - currentNumericVersion != LATEST_VERSION - ? "version-select old-version" - : "version-select"; - - return ( -
- -
- ); - }; - - const handleSelectVersion = (event) => { - const functionObject = - docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction]; - const slicedSlug = slug.slice(); - - if (event.target.value !== currentNumericVersion) { - if (looksLikeVersionAndPlatformString(slicedSlug[0])) { - slicedSlug.shift(); - } - if (event.target.value !== LATEST_VERSION) { - slicedSlug.unshift(event.target.value); - } else { - goToLatest(); - } - } - - if (!functionObject) { - router.push(`/${slicedSlug.join("/")}`); - } else { - const name = cleanHref(`st.${functionObject.name}`); - router.push(`/${slicedSlug.join("/")}#${name} `); - } - }; - const footers = []; const args = []; const returns = []; @@ -184,31 +128,25 @@ const Autofunction = ({ } } else { return ( -
-
-

+

+ - {streamlitFunction.replace("streamlit", "st")} -

- -
+ + + {streamlitFunction.replace("streamlit", "st")} +

This method does not exist in version{" "} @@ -263,18 +201,7 @@ const Autofunction = ({ ); header = (

-
- {headerTitle} - -
+ {headerTitle} {deprecated === true ? (

@@ -543,4 +470,4 @@ const Autofunction = ({ ); }; -export default withRouter(Autofunction); +export default Autofunction; diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css index f7b407c36..721be0959 100644 --- a/components/blocks/autofunction.module.css +++ b/components/blocks/autofunction.module.css @@ -6,54 +6,10 @@ @apply mb-6; } -.TitleContainer { - @apply flex flex-col items-start md:flex-row md:items-baseline mt-4 mb-2; -} - .Title { @apply mt-6 mb-2; } -.Form { - @apply relative my-4 md:my-0 ml-0 md:ml-auto min-w-fit; -} - -.Form::after { - @apply hidden md:block md:absolute md:bottom-1/4 md:right-0 md:opacity-70 md:pointer-events-none md:w-3 md:h-2; - content: ""; - background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -} - -.Form::before { - @apply md:hidden block absolute bottom-1/4 left-0 opacity-70 pointer-events-none w-3 h-2; - content: ""; - background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -} - -.Select { - @apply appearance-none bg-white border-none p-0 m-0 w-full font-mono text-lg font-bold leading-none md:text-right text-left md:pr-5 md:pl-0 pr-0 pl-5; -} - -:global(.dark) .Select { - @apply bg-gray-100 text-gray-40; -} - -:global(.old-version) .Select { - @apply text-red-70; -} - -:global(.sis-version) .Select { - @apply text-lightBlue-70; -} - -:global(.dark) .Form::after { - background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -} - -:global(.dark) .Form::before { - background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -} - .CodeBlockContainer { @apply mb-7 relative; } diff --git a/components/layouts/container.module.css b/components/layouts/container.module.css index fa12c78eb..43e058aa3 100644 --- a/components/layouts/container.module.css +++ b/components/layouts/container.module.css @@ -6,6 +6,11 @@ @apply col-span-full lg:col-start-2 lg:col-end-5; } +.StickyContext { + /* Container for sticky version selector - must have height */ + @apply relative; +} + .ArticleContainer { @apply relative; } diff --git a/components/layouts/globalTemplate.js b/components/layouts/globalTemplate.js index 12361fe1a..d88e4b6c2 100644 --- a/components/layouts/globalTemplate.js +++ b/components/layouts/globalTemplate.js @@ -4,7 +4,7 @@ import ChatSticky from "../navigation/chatSticky"; import styles from "./globalTemplate.module.css"; -const Layout = ({ children }) => { +const Layout = ({ children, versionProps }) => { const [isSticky, setIsSticky] = useState(false); const handleScroll = () => { @@ -22,7 +22,7 @@ const Layout = ({ children }) => { return (

-
+
{children}
diff --git a/components/navigation/header.js b/components/navigation/header.js index 41276cd2d..c560a19b4 100644 --- a/components/navigation/header.js +++ b/components/navigation/header.js @@ -6,6 +6,7 @@ import dynamic from "next/dynamic"; // import Navigation from import MobileNav from "./mobileNav"; +import VersionSelector from "../utilities/versionSelector"; import styles from "./header.module.css"; @@ -14,7 +15,7 @@ const ThemeToggle = dynamic(() => import("../utilities/themeToggle"), { }); import Search from "../utilities/search"; -const Header = ({ isSticky }) => { +const Header = ({ isSticky, versionProps }) => { const [windowWidth, setWindowWidth] = useState(); const handleResize = () => { @@ -49,6 +50,7 @@ const Header = ({ isSticky }) => {

Documentation

+ {versionProps && }
diff --git a/components/navigation/header.module.css b/components/navigation/header.module.css index baa378788..62afba5e6 100644 --- a/components/navigation/header.module.css +++ b/components/navigation/header.module.css @@ -1,26 +1,30 @@ .Container { - @apply relative w-full z-30 border-b; + @apply relative w-full z-30; @apply bg-white !important; } .stickyContainer { - @apply fixed h-12 border-b-gray-30 top-0; + @apply fixed h-12 top-0; +} + +/* Fade effect using background color gradient */ +.stickyContainer::after { + content: ""; + @apply absolute left-0 right-0 h-6 pointer-events-none; + top: 100%; + background: linear-gradient(to bottom, theme("colors.white"), transparent); } .standardContainer { - @apply border-b-white h-24; + @apply h-24; } :global(.dark) .Container { @apply bg-gray-100 !important; } -:global(.dark) .stickyContainer { - @apply border-b-gray-80 !important; -} - -:global(.dark) .standardContainer { - @apply border-b-gray-100 !important; +:global(.dark) .stickyContainer::after { + background: linear-gradient(to bottom, theme("colors.gray.100"), transparent); } .Navigation { diff --git a/components/utilities/versionSelector.js b/components/utilities/versionSelector.js new file mode 100644 index 000000000..1889840ec --- /dev/null +++ b/components/utilities/versionSelector.js @@ -0,0 +1,126 @@ +import React, { useState, useRef, useEffect } from "react"; +import classNames from "classnames"; +import { useRouter } from "next/router"; +import getConfig from "next/config"; + +import { looksLikeVersionAndPlatformString } from "../../lib/next/utils"; +import styles from "./versionSelector.module.css"; + +const { publicRuntimeConfig } = getConfig(); + +const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION; +const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION; +const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST; + +const VersionSelector = ({ version, slug, goToLatest, isMobile = false }) => { + const router = useRouter(); + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + const currentNumericVersion = + version == DEFAULT_VERSION ? LATEST_VERSION : version; + const isOldVersion = currentNumericVersion != LATEST_VERSION; + + // Close dropdown when clicking outside + useEffect(() => { + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setIsOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const handleSelectVersion = (selectedVersion) => { + setIsOpen(false); + const slicedSlug = slug.slice(); + + if (selectedVersion !== currentNumericVersion) { + if (looksLikeVersionAndPlatformString(slicedSlug[0])) { + slicedSlug.shift(); + } + if (selectedVersion !== LATEST_VERSION) { + slicedSlug.unshift(selectedVersion); + } else { + goToLatest(); + } + } + + router.push(`/${slicedSlug.join("/")}`); + }; + + const containerClass = isMobile ? styles.MobileContainer : styles.Container; + + return ( +
+ Show API reference for +
+ + {isOpen && ( +
    + {VERSIONS_LIST.map((ver) => ( +
  • handleSelectVersion(ver)} + > + Version {ver} + {ver === currentNumericVersion && ( + + check + + )} +
    • + ))} +
+ )} +
+
+ ); +}; + +export default VersionSelector; diff --git a/components/utilities/versionSelector.module.css b/components/utilities/versionSelector.module.css new file mode 100644 index 000000000..729ece76a --- /dev/null +++ b/components/utilities/versionSelector.module.css @@ -0,0 +1,154 @@ +.Container { + @apply flex items-center gap-2 mt-2 mb-4; + /* Sticky positioning - stays in place as you scroll */ + position: sticky; + top: 0.75rem; + z-index: 50; /* Above header (z-30) */ + width: fit-content; + align-self: flex-start; +} + +/* On mobile, hide this - we'll show a separate one in header */ +@media (max-width: 1023px) { + .Container { + @apply hidden; + } +} + +.Prefix { + @apply text-sm text-gray-70; +} + +/* Dropdown wrapper */ +.DropdownWrapper { + @apply relative; +} + +/* The button that shows selected value */ +.DropdownButton { + @apply relative flex items-center gap-1.5 bg-gray-20 rounded px-2 cursor-pointer border-none text-left; + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +:global(.dark) .DropdownButton { + @apply bg-gray-90; +} + +.SelectedValue { + @apply text-sm font-medium text-gray-90 leading-none whitespace-nowrap; +} + +:global(.dark) .SelectedValue { + @apply text-gray-40; +} + +/* Arrow indicator - using material icon for consistency */ +.Arrow { + @apply ml-0.5 transition-transform duration-150 text-gray-70; + font-size: 1.125rem; +} + +:global(.dark) .Arrow { + @apply text-gray-50; +} + +.ArrowOpen { + transform: rotate(180deg); +} + +/* Dropdown menu - solid background matching site */ +.DropdownMenu { + @apply absolute top-full left-0 mt-1 rounded list-none m-0 min-w-full z-50; + @apply bg-white border-none; + padding: 0.375rem 0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +:global(.dark) .DropdownMenu { + @apply bg-gray-100 border border-gray-80; + box-shadow: none; +} + +.DropdownItem { + @apply px-2.5 text-sm cursor-pointer text-gray-90 flex items-center justify-between gap-4 whitespace-nowrap mb-1; + padding-top: 0.2rem; +} + +.DropdownItem:hover { + @apply bg-gray-20; +} + +:global(.dark) .DropdownItem { + @apply text-gray-40; +} + +:global(.dark) .DropdownItem:hover { + @apply bg-gray-90; +} + +.DropdownItemSelected { + @apply font-medium; +} + +.CheckIcon { + @apply text-base text-gray-70 leading-none; + font-size: 1rem; +} + +:global(.dark) .CheckIcon { + @apply text-gray-50; +} + +/* Old version styling - matches Warning block colors */ +.OldVersion .DropdownButton { + @apply bg-orange-10; +} + +:global(.dark) .OldVersion .DropdownButton { + background-color: #481d00; +} + +/* Text color matches Warning block header (orange-70) */ +.OldVersionText { + @apply text-orange-70; +} + +:global(.dark) .OldVersionText { + @apply text-orange-70; +} + +/* Warning arrow - matches orange-70 text */ +.OldVersion .Arrow { + @apply text-orange-70; +} + +/* Warning icon - circular like the Warning block (bg-orange-70) */ +.WarningIcon { + @apply text-white text-xs rounded-full bg-orange-70 flex-shrink-0; + width: 1rem; + height: 1rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; +} + +/* Mobile version selector - shown in header */ +.MobileContainer { + @apply hidden items-center gap-2; +} + +@media (max-width: 1023px) { + .MobileContainer { + @apply flex; + } +} + +.MobileContainer .Prefix { + @apply hidden; +} + +.MobileContainer .DropdownButton { + @apply py-0.5 px-1.5; +} diff --git a/pages/[...slug].js b/pages/[...slug].js index 37d30cb6c..2dccdf6ff 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -44,6 +44,7 @@ import Helpful from "../components/utilities/helpful"; import { H1, H2, H3 } from "../components/blocks/headers"; import Psa from "../components/utilities/psa"; import FloatingNav from "../components/utilities/floatingNav"; +import VersionSelector from "../components/utilities/versionSelector"; // MDX Components import Autofunction from "../components/blocks/autofunction"; @@ -108,11 +109,11 @@ export default function Article({ }) { const router = useRouter(); - let versionWarning; let currentLink; const { version, platform, goToLatest, goToOpenSource } = useVersionContext(); - const isVersionedPage = currMenuItem && currMenuItem.isVersioned; + // Determine if page is versioned based on having docstrings (Autofunction usage) + const isVersionedPage = docstrings && Object.keys(docstrings).length > 0; const isUnversionedURL = !versionFromSlug || !platformFromSlug; const contextIsDefault = version == DEFAULT_VERSION && platform == DEFAULT_PLATFORM; @@ -164,7 +165,6 @@ export default function Article({ version={version} slug={slug} oldStreamlitFunction={props.oldName ?? ""} - goToLatest={goToLatest} /> ), pre: (props) => , @@ -180,21 +180,8 @@ export default function Article({ let arrowContainer; let keywordsTag; - if (version != DEFAULT_VERSION && currMenuItem.isVersioned) { - // Slugs don't have the version number, so we just have to join them. - currentLink = `/${slug.join("/")}`; - versionWarning = ( - -

- You are reading the documentation for Streamlit version {version}, but{" "} - - {LATEST_VERSION} - {" "} - is the latest version available. -

- - ); - } + // Version props for versioned pages (used by both inline selector and mobile header) + const versionProps = isVersionedPage ? { version, slug, goToLatest } : null; if (prevMenuItem) { previousArrow = ( @@ -236,7 +223,7 @@ export default function Article({ img: Image, }} > - +
@@ -288,19 +275,21 @@ export default function Article({ />
- {versionWarning} -
- -
- - {arrowContainer} - -
-
+
+ {versionProps && } +
+ +
+ + {arrowContainer} + +
+
+
From f1768bb8b0f343b1331041f0c2c7df2f25a22bfd Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 19 Dec 2025 08:27:35 -0800 Subject: [PATCH 2/3] Style fixes --- components/navigation/header.js | 2 +- components/navigation/header.module.css | 4 ++-- components/utilities/versionSelector.js | 4 +++- .../utilities/versionSelector.module.css | 23 ++++++++++++------- tailwind.config.js | 1 + 5 files changed, 22 insertions(+), 12 deletions(-) diff --git a/components/navigation/header.js b/components/navigation/header.js index c560a19b4..7cad443ff 100644 --- a/components/navigation/header.js +++ b/components/navigation/header.js @@ -50,8 +50,8 @@ const Header = ({ isSticky, versionProps }) => {

Documentation

- {versionProps && }
+ {versionProps && } {mobileNav} diff --git a/components/navigation/header.module.css b/components/navigation/header.module.css index 62afba5e6..1bdd0a7ba 100644 --- a/components/navigation/header.module.css +++ b/components/navigation/header.module.css @@ -32,11 +32,11 @@ } .LogoContainer { - @apply flex items-center m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70; + @apply flex items-center gap-4 m-0 text-base tracking-tight md:ml-0 lg:ml-2 xl:-ml-1 hover:opacity-70 mr-4; } .LogoText { - @apply hidden xl:block m-0 font-normal ml-4 relative top-px text-lg; + @apply hidden xl:block m-0 font-normal mr-4 relative top-px text-lg; @apply text-gray-90 !important; } diff --git a/components/utilities/versionSelector.js b/components/utilities/versionSelector.js index 1889840ec..6d6b99abf 100644 --- a/components/utilities/versionSelector.js +++ b/components/utilities/versionSelector.js @@ -81,7 +81,9 @@ const VersionSelector = ({ version, slug, goToLatest, isMobile = false }) => { [styles.OldVersionText]: isOldVersion, })} > - Version {currentNumericVersion} + Version + v + {currentNumericVersion}