Fix version selector

Author: amrit110

docs/contributing.md

@@ -31,9 +31,7 @@ Thank you for your interest in contributing to Vector Inference! This guide will
     If you prefer using virtual environments, you can use `uv venv` to create one:
     ```bash
     uv venv
-    source .venv/bin/activate  # On Linux/macOS
-    # or
-    .venv\Scripts\activate  # On Windows
+    source .venv/bin/activate
     ```
 
 ## Development Workflow

docs/stylesheets/extra.css

@@ -90,65 +90,146 @@
   margin-right: 0.2em;
 }
 
-/* Mike version selector styling */
-.md-header__topic {
-  display: flex;
-  align-items: center;
-}
+/* Version selector styling - Material theme */
 
-.md-version-select {
-  margin-left: 0.6rem;
+/* Version selector container */
+.md-version {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25rem;
 }
 
+/* Current version button styling */
 .md-version__current {
-  cursor: pointer;
-  color: var(--md-primary-bg-color);
-  font-weight: 700;
-  font-size: 0.8rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-  padding: 0.2rem 0.4rem;
   display: inline-flex;
   align-items: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--md-primary-bg-color);
+  padding: 0.4rem 0.8rem;
+  margin: 0.4rem 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+/* Hover effect for current version button */
+.md-version__current:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.md-version__current::after {
+/* Down arrow for version dropdown */
+.md-version__current:after {
   display: inline-block;
+  margin-left: 0.5rem;
   content: "";
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid currentColor;
-  margin-left: 0.4rem;
+  vertical-align: middle;
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
 }
 
+/* Dropdown menu */
 .md-version__list {
   position: absolute;
   top: 100%;
   left: 0;
+  z-index: 10;
+  min-width: 125%;
+  margin: 0.1rem 0 0;
+  padding: 0;
   background-color: var(--md-primary-fg-color);
   border-radius: 4px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-  z-index: 2;
-  min-width: 150px;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.25s;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.2s ease;
 }
 
+/* Show dropdown when parent is hovered */
 .md-version:hover .md-version__list {
-  max-height: 300px;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Version list items */
+.md-version__item {
+  list-style: none;
+  padding: 0;
 }
 
+/* Version links */
 .md-version__link {
   display: block;
   padding: 0.5rem 1rem;
+  font-size: 0.75rem;
   color: var(--md-primary-bg-color);
-  font-size: 0.8rem;
-  transition: background-color 0.25s;
+  transition: background-color 0.15s;
+  text-decoration: none;
 }
 
+/* Version link hover */
 .md-version__link:hover {
   background-color: var(--md-primary-fg-color--dark);
+  text-decoration: none;
+}
+
+/* Active version in dropdown */
+.md-version__link--active {
+  background-color: var(--md-accent-fg-color);
+  color: var(--md-accent-bg-color);
+  font-weight: 700;
+}
+
+/* For the Material selector */
+.md-header__option {
+  display: flex;
+  align-items: center;
+}
+
+/* Version selector in Material 9.x */
+.md-select {
+  position: relative;
+  margin-left: 0.5rem;
+}
+
+.md-select__label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--md-primary-bg-color);
+  cursor: pointer;
+  padding: 0.4rem 0.8rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.15s ease-in-out;
+}
+
+.md-select__label:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Version selector in Material 9.2+ */
+.md-header__button.md-select {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0.8rem;
+}
+
+/* For Material 9.x+ with specific version selector */
+.md-typeset .md-version-warn {
+  padding: 0.6rem 1rem;
+  margin: 1.5rem 0;
+  background-color: rgba(235, 8, 138, 0.1);
+  border-left: 4px solid #eb088a;
+  border-radius: 0.2rem;
+  color: var(--md-default-fg-color);
+  font-size: 0.8rem;
 }

mkdocs.yml

@@ -7,6 +7,9 @@ extra:
       link: 404.html
     - icon: fontawesome/brands/github
       link: https://github.com/VectorInstitute/vector-inference
+  version:
+    provider: mike
+    default: latest
 markdown_extensions:
   - attr_list
   - admonition
@@ -38,6 +41,7 @@ plugins:
       css_dir: stylesheets
       canonical_version: latest
       alias_type: symlink
+      deploy_prefix: ''
   - mkdocstrings:
       default_handler: python
       handlers:
@@ -57,7 +61,9 @@ plugins:
 repo_url: https://github.com/VectorInstitute/vector-inference
 repo_name: VectorInstitute/vector-inference
 site_name: Vector Inference
+site_url: https://vectorinstitute.github.io/vector-inference/
 theme:
+  name: material
   custom_dir: docs/overrides
   favicon: assets/favicon-48x48.svg
   features:
@@ -67,6 +73,7 @@ theme:
     - navigation.indexes
     - navigation.instant
     - navigation.tabs
+    - navigation.tabs.sticky
     - navigation.top
     - search.suggest
     - search.highlight
@@ -75,7 +82,6 @@ theme:
     repo: fontawesome/brands/github
   logo: assets/vector-logo.svg
   logo_footer: assets/vector-logo.svg
-  name: material
   palette:
     - media: "(prefers-color-scheme: light)"
       scheme: default