style: improve scrollbar styling on the version dropdown

Author: julhoang

static/css/v3/header.css

@@ -310,6 +310,11 @@ html.dark .header__icon--theme-moon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.header__version-toggle:checked ~ .header__version-trigger .header__icon--chevron {
+  transform: rotate(180deg);
 }
 
 .header__version-dropdown {
@@ -322,14 +327,20 @@ html.dark .header__icon--theme-moon {
   flex-direction: column;
   width: max-content;
   min-width: 100%;
-  max-height: calc(var(--dropdown-item-height) * 7); /* Show up to 7 items, then scroll */
-  overflow-y: auto;
   border-radius: var(--header-radius);
   border: 1px solid var(--color-stroke-weak);
   background: var(--color-surface-weak);
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.header__version-dropdown-scroll {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(var(--dropdown-item-height) * 7); /* Show up to 7 items, then scroll */
+  overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--color-icon-primary) var(--color-surface-strong);
-  z-index: 1000;
 }
 
 .header__version-dropdown .header__version-option {
@@ -339,7 +350,7 @@ html.dark .header__icon--theme-moon {
   width: 100%;
   height: var(--dropdown-item-height);
   padding: 0 var(--space-large);
-  border: none;
+  border-bottom: 1px solid var(--color-stroke-mid);
   border-radius: 0;
   background: transparent;
   font-family: var(--font-sans);
@@ -353,6 +364,10 @@ html.dark .header__icon--theme-moon {
   transition: background-color 0.1s ease, color 0.1s ease;
 }
 
+.header__version-dropdown .header__version-option:last-child {
+  border-bottom: none;
+}
+
 .header__version-dropdown .header__version-option + .header__version-option {
   border-top: 1px solid var(--color-stroke-subtle);
 }

templates/v3/includes/header/_header_version_dropdown.html

@@ -37,41 +37,43 @@
   <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__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 }}"
+    <div class="header__version-dropdown-scroll">
+      {% if selected_version_is_url_driven %}
+        {% if latest_href %}
+          <a href="{{ latest_href }}"
              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>
+             {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>Latest</a>
         {% endif %}
-      {% endfor %}
-    {% else %}
-      <form method="post"
-            action="{% url 'set-version' %}"
-            class="header__version-form">
-        {% csrf_token %}
-        <button type="submit"
-                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 %}
+          {% if v.href %}
+            <a href="{{ v.href }}"
+               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">
+          {% csrf_token %}
           <button type="submit"
                   name="version"
-                  value="{{ v.slug }}"
+                  value="latest"
                   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>
-        {% endfor %}
-      </form>
-    {% endif %}
+                  {% if not selected_version_is_non_latest %}aria-current="true"{% endif %}>Latest</button>
+          {% for v in version_dropdown_options %}
+            <button type="submit"
+                    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>
+          {% endfor %}
+        </form>
+      {% endif %}
+    </div>
   </div>
 </div>