From 7e0ccbc8bf6a2c31334371542ec47cbef1ff637f Mon Sep 17 00:00:00 2001
From: karl-bullock <karl@linkrobins.com>
Date: Tue, 21 Jul 2026 20:48:35 -0400
Subject: [PATCH] fix(core): DetailedDropdownItem icons overlap in phone
 dropdown menus

---
 .../core/less/common/DetailedDropdownItem.less   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/framework/core/less/common/DetailedDropdownItem.less b/framework/core/less/common/DetailedDropdownItem.less
index 6cc25632a7..cf3f75e200 100644
--- a/framework/core/less/common/DetailedDropdownItem.less
+++ b/framework/core/less/common/DetailedDropdownItem.less
@@ -28,3 +28,19 @@
   font-size: 12px;
   margin-top: 3px;
 }
+
+@media @phone {
+  // The phone dropdown styles assume one icon per menu item and pull it into
+  // the row's left gutter with a negative margin. This component renders two
+  // icons (check + option icon), so that treatment stacks them on top of each
+  // other. Undo it and let the component's own columns lay the icons out.
+  .Dropdown .Dropdown-menu > li > .DetailedDropdownItem {
+    &.hasIcon {
+      padding-left: 20px;
+    }
+
+    .Button-icon {
+      margin-left: 0;
+    }
+  }
+}