<p></p>
<p><b>@gravitystorm</b> requested changes on this pull request.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6576#discussion_r2586165428">app/assets/javascripts/index/contextmenu.js</a>:</p>
<pre style='color:#555'>> @@ -177,7 +177,7 @@ class ContextMenu {
   }
 
   _render(items) {
-    const $menuList = $("<ul>").addClass("dropdown-menu show shadow cm_dropdown_menu");
+    const $menuList = $("<ul>").addClass("dropdown-menu list-group show shadow cm_dropdown_menu");
</pre>
<p dir="auto">I don't think it's a good idea to try to make this styled as <em>both</em> a dropdown menu and also as a list-group. It shouldn't be both, these are two different bootstrap components.</p>
<div class="highlight highlight-source-diff" dir="auto"><pre class="notranslate"><span class="pl-md"><span class="pl-md">-</span>    const $menuList = $("<ul>").addClass("dropdown-menu list-group show shadow cm_dropdown_menu");</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>    const $menuList = $("<ul>").addClass("dropdown-menu show shadow cm_dropdown_menu");</span></pre></div>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6576#discussion_r2586169299">app/assets/stylesheets/common.scss</a>:</p>
<pre style='color:#555'>>  }
 
 /* Rules for contextmenu */
 
 #map-context-menu {
   .dropdown-item {
     &:hover, &:active {
-      background-color: $gray-200;
+      @extend :focus;
</pre>
<p dir="auto">How about we just don't override the hover and active states at all, and let bootstrap deal with them? If we leave it alone, it works fine in both dark and light modes, as far as I can tell.</p>
<div class="highlight highlight-source-diff" dir="auto"><pre class="notranslate"> #map-context-menu {
<span class="pl-md"><span class="pl-md">-</span>  .dropdown-item {</span>
<span class="pl-md"><span class="pl-md">-</span>    &:hover, &:active {</span>
<span class="pl-md"><span class="pl-md">-</span>      @extend :focus;</span>
<span class="pl-md"><span class="pl-md">-</span>    }</span>
<span class="pl-md"><span class="pl-md">-</span>  }</span>
   &.cm_dropdown {</pre></div>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6576#discussion_r2586169573">app/assets/javascripts/index/contextmenu.js</a>:</p>
<pre style='color:#555'>> @@ -194,7 +194,7 @@ class ContextMenu {
     const $label = $("<span>").text(item.text);
 
     const $link = $("<a>")
-      .addClass("dropdown-item d-flex align-items-center gap-3")
+      .addClass("dropdown-item list-group-item-action d-flex align-items-center gap-3")
</pre>
<div class="highlight highlight-source-diff" dir="auto"><pre class="notranslate"><span class="pl-md"><span class="pl-md">-</span>      .addClass("dropdown-item list-group-item-action d-flex align-items-center gap-3")</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>      .addClass("dropdown-item d-flex align-items-center gap-3")</span></pre></div>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6576#pullrequestreview-3536348465">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJZSC4C3QOTSPIDDMT374TGRAVCNFSM6AAAAACNWYKF3CVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTKMZWGM2DQNBWGU">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLM6TCPK2W3L3CODJRD374TGRA5CNFSM6AAAAACNWYKF3CWGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTWSZBSTC.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/6576/review/3536348465</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/6576#pullrequestreview-3536348465",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/6576#pullrequestreview-3536348465",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>