DEV: Make breadcrumb separators unclickable icons (#29817)

The current breadcrumb separators are ">" characters that are added as pseudo-elements. These become part of the clickable area for the links, which causes mis-clicks.

This PR does two things:

- Replace the pseudo-element with a DIcon.
- Make sure the separator is not clickable.

app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
+import icon from "discourse-common/helpers/d-icon";
 import getURL from "discourse-common/lib/get-url";
 
 export default class DBreadcrumbsItem extends Component {
@@ -26,6 +27,9 @@ export default class DBreadcrumbsItem extends Component {
         <a href={{getURL path}} class={{@linkClass}}>
           {{label}}
         </a>
+        <span class="separator">
+          {{~icon "angle-right"~}}
+        </span>
       </li>
     </template>;
   }

app/assets/stylesheets/common/components/d-breadcrumbs.scss

@@ -11,11 +11,20 @@
     color: var(--primary-medium);
   }
 
-  li:not(:last-child) a::after {
+  li {
-    display: inline;
+    .separator {
-    padding: 0 var(--space-1);
+      margin-right: var(--space-1);
-    margin-right: var(--space-1);
+
-    font-size: var(--font-down-1);
+      .d-icon {
-    content: ">";
+        color: var(--primary-medium);
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+
+  li:last-child {
+    .separator {
+      display: none;
+    }
   }
 }