From c3367c329cd4820938e30ca6a3e8d07e6aec5d67 Mon Sep 17 00:00:00 2001
From: Ted Johansson <ted@discourse.org>
Date: Tue, 19 Nov 2024 16:42:43 +0800
Subject: [PATCH] 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/components/d-breadcrumbs-item.gjs     |  4 ++++
 .../common/components/d-breadcrumbs.scss      | 21 +++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs b/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs
index 7626c4b4bb2..108b01e4ac5 100644
--- a/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs
+++ b/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>;
   }
diff --git a/app/assets/stylesheets/common/components/d-breadcrumbs.scss b/app/assets/stylesheets/common/components/d-breadcrumbs.scss
index 8e7bb8b384b..b7204fc781c 100644
--- a/app/assets/stylesheets/common/components/d-breadcrumbs.scss
+++ b/app/assets/stylesheets/common/components/d-breadcrumbs.scss
@@ -11,11 +11,20 @@
     color: var(--primary-medium);
   }
 
-  li:not(:last-child) a::after {
-    display: inline;
-    padding: 0 var(--space-1);
-    margin-right: var(--space-1);
-    font-size: var(--font-down-1);
-    content: ">";
+  li {
+    .separator {
+      margin-right: var(--space-1);
+
+      .d-icon {
+        color: var(--primary-medium);
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+
+  li:last-child {
+    .separator {
+      display: none;
+    }
   }
 }