Redmine

In 7.0.0, the account menu in the top bar (avatar in the top-right corner) became a dropdown (#31353).
Its trigger is a plain avatar with no visual affordance hinting that it opens a menu.
First-time users may not realize it is clickable.

This patch adds a small caret next to the avatar, using the existing `.dropdown` / `.dropdown-content` markup and `:has()` selector already used by the component: the caret rotates 180° while the menu is open, using CSS only (no JS change needed).

Patch attached: account_menu_caret.patch (against trunk, 2 files changed:app/views/layouts/base.html.erb, app/assets/stylesheets/dropdown.css).

diff --git a/app/assets/stylesheets/dropdown.css b/app/assets/stylesheets/dropdown.css
index 648ee5b03..8caddc15f 100644
--- a/app/assets/stylesheets/dropdown.css
+++ b/app/assets/stylesheets/dropdown.css
@@ -16,6 +16,19 @@
   text-decoration: none;
 }

+.dropdown-caret {
+  display: inline-block;
+  margin-inline-start: 6px;
+  border-inline: 4px solid transparent;
+  border-block-start: 5px solid var(--oc-gray-1);
+  border-block-end: 0;
+  transition: transform 0.15s ease;
+}
+
+.dropdown:has(> .dropdown-content:not(.hidden)) .dropdown-caret {
+  transform: rotate(180deg);
+}
+
 .dropdown-content {
   position: absolute;
   inset-block-start: 100%;
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index b294a2bff..1ae5ecf9c 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -68,6 +68,7 @@
     <div id="account" class="dropdown" data-controller="dropdown">
       <a href="#" class="dropdown-trigger" data-action="click->dropdown#toggle">
         <%= avatar(User.current, :size => "22") %>
+        <span class="dropdown-caret" aria-hidden="true"></span>
       </a>
       <div class="dropdown-content hidden" data-dropdown-target="content">
         <div class="user-info">