style: UI improvement to match existing _field_dropdown.html

Author: julhoang

static/css/v3/header.css

@@ -313,45 +313,66 @@ html.dark .header__icon--theme-moon {
 }
 
 .header__version-dropdown {
+  --dropdown-item-height: 40px;
+
   display: none;
   position: absolute;
   top: calc(100% + var(--space-s));
   right: 0;
   flex-direction: column;
   width: max-content;
   min-width: 100%;
-  max-height: 60vh;
+  max-height: calc(var(--dropdown-item-height) * 7); /* Show up to 7 items, then scroll */
   overflow-y: auto;
-  padding: var(--space-default) var(--space-medium);
-  gap: var(--space-s);
   border-radius: var(--header-radius);
-  border: 1px solid var(--color-stroke-mid);
+  border: 1px solid var(--color-stroke-weak);
   background: var(--color-surface-weak);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-icon-primary) var(--color-surface-strong);
   z-index: 1000;
 }
 
-.header__version-dropdown .header__nav-link {
-  padding: 0 var(--space-s);
+.header__version-dropdown .header__version-option {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
   width: 100%;
-}
-
-/* Forms wrap individual options; `display: contents` lets the inner button
-   inherit the dropdown's flex layout directly. */
-.header__version-form {
-  display: contents;
-}
-
-.header__version-dropdown button.header__nav-link {
+  height: var(--dropdown-item-height);
+  padding: 0 var(--space-large);
   border: none;
+  border-radius: 0;
   background: transparent;
-  font: inherit;
-  color: inherit;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-secondary);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+.header__version-dropdown .header__version-option + .header__version-option {
+  border-top: 1px solid var(--color-stroke-subtle);
+}
+
+.header__version-dropdown .header__version-option:hover,
+.header__version-dropdown .header__version-option:focus {
+  background-color: var(--color-surface-mid);
+  color: var(--color-text-link-accent);
+  outline: none;
+}
+
+.header__version-dropdown .header__version-option:focus-visible {
+  outline: 2px solid var(--color-text-link-accent);
+  outline-offset: -2px;
 }
 
 .header__version-option[aria-current="true"] {
-  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  text-decoration: underline;
 }
 
 /* ── User menu & avatar ────────────────────────── */

templates/v3/includes/_header_v3.html

@@ -148,12 +148,17 @@
   document.addEventListener('submit', function (e) {
     var form = e.target;
     if (!form.matches || !form.matches('.header__version-form')) return;
+
+    // The clicked option button carries name="version" value="<slug>".
+    // FormData(form) doesn't include the submitter's name/value, so append it.
+    var submitter = e.submitter;
+    if (!submitter || submitter.name !== 'version') return;
     e.preventDefault();
 
+    var selectedValue = submitter.value;
+    var newLabel = submitter.textContent.trim();
     var formData = new FormData(form);
-    var submitBtn = form.querySelector('button[type="submit"]');
-    var newLabel = submitBtn ? submitBtn.textContent.trim() : '';
-    var selectedValue = formData.get('version');
+    formData.set('version', selectedValue);
 
     fetch(form.action, {
       method: 'POST',
@@ -170,9 +175,7 @@
         if (label) label.textContent = newLabel;
 
         menu.querySelectorAll('.header__version-option').forEach(function (opt) {
-          var optForm = opt.closest('.header__version-form');
-          var optInput = optForm && optForm.querySelector('input[name="version"]');
-          if (optInput && optInput.value === selectedValue) {
+          if (opt.value === selectedValue) {
             opt.setAttribute('aria-current', 'true');
           } else {
             opt.removeAttribute('aria-current');

templates/v3/includes/header/_header_version_dropdown.html

@@ -26,52 +26,52 @@
          class="header__version-toggle"
          aria-label="Select Boost version"
          aria-controls="{{ version_menu_id }}-dropdown">
-  <label for="{{ version_menu_id }}-toggle" class="header__version-trigger" aria-hidden="true">
+  <label for="{{ version_menu_id }}-toggle"
+         class="header__version-trigger"
+         aria-hidden="true">
     <span class="header__version-label">{{ selected_version_label }}</span>
     <span class="icon-brand-accent">
       {% include "includes/icon.html" with icon_name="chevron-down" icon_class="header__icon header__icon--chevron" icon_size=16 %}
     </span>
   </label>
-  <div id="{{ version_menu_id }}-dropdown" role="group" class="header__version-dropdown">
+  <div id="{{ version_menu_id }}-dropdown"
+       role="group"
+       class="header__version-dropdown">
     {% if selected_version_is_url_driven %}
       {% if latest_href %}
         <a href="{{ latest_href }}"
-           class="header__nav-link header__version-option"
-           {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>
-          Latest
-        </a>
+           class="header__version-option"
+           {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>Latest</a>
       {% endif %}
       {% for v in version_dropdown_options %}
         {% if v.href %}
           <a href="{{ v.href }}"
-             class="header__nav-link header__version-option"
-             {% if selected_version and v.slug == selected_version.slug %}aria-current="true"{% endif %}>
+             class="header__version-option"
+             {% if selected_version_is_non_latest and selected_version and v.slug == selected_version.slug %}aria-current="true"{% endif %}>
             {{ v.display_name }}
           </a>
         {% endif %}
       {% endfor %}
-
     {% else %}
-      <form method="post" action="{% url 'set-version' %}" class="header__version-form">
+      <form method="post"
+            action="{% url 'set-version' %}"
+            class="header__version-form">
         {% csrf_token %}
-        <input type="hidden" name="version" value="latest">
         <button type="submit"
-                class="header__nav-link header__version-option"
-                {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>
-          Latest
-        </button>
-      </form>
-      {% for v in version_dropdown_options %}
-        <form method="post" action="{% url 'set-version' %}" class="header__version-form">
-          {% csrf_token %}
-          <input type="hidden" name="version" value="{{ v.slug }}">
+                name="version"
+                value="latest"
+                class="header__version-option"
+                {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>Latest</button>
+        {% for v in version_dropdown_options %}
           <button type="submit"
-                  class="header__nav-link header__version-option"
-                  {% if selected_version and v.slug == selected_version.slug %}aria-current="true"{% endif %}>
+                  name="version"
+                  value="{{ v.slug }}"
+                  class="header__version-option"
+                  {% if selected_version_is_non_latest and selected_version and v.slug == selected_version.slug %}aria-current="true"{% endif %}>
             {{ v.display_name }}
           </button>
-        </form>
-      {% endfor %}
+        {% endfor %}
+      </form>
     {% endif %}
   </div>
 </div>