discourse/app/assets/stylesheets/common/components/d-breadcrumbs.scss
Régis Hanol 9428a23507
FIX: Render breadcrumb separator from data instead of :last-child (#39371)
The breadcrumb `>` separator was rendered on every item and hidden on
the last one via a `li:last-child` CSS rule. That worked for static
breadcrumbs, but `DeferredTrackedSet.add()` defers item registration
through `next()`. When navigating into a child route (e.g.
`/admin/backups/logs`), the new `DBreadcrumbsItem` mounts and renders
before its `add()` flushes — leaving the previously-last `<li>` as the
DOM's actual `:last-child` for one tick, so its `>` disappears until the
next re-render brings everything back into sync. On the backups page,
frequent MessageBus updates during a running backup made that window
visible: the arrow would intermittently drop until the user navigated
out and back in.

Bind separator visibility to the tracked-set index instead:
`DBreadcrumbsContainer` passes `@isLast` to each item, and
`DBreadcrumbsItem` only renders the separator when `@isLast` is false.
The CSS rule is gone. Separator presence now tracks the authoritative
Set state rather than the DOM's transient structure, closing the
stale-last-child window.

https://meta.discourse.org/t/400730
2026-04-22 14:41:55 +02:00

26 lines
412 B
SCSS
Vendored

.d-breadcrumbs {
display: flex;
flex-wrap: wrap;
margin: var(--space-2) 0 var(--space-4) 0;
&__item {
list-style-type: none;
white-space: nowrap;
}
&__link,
&__link:visited {
color: var(--primary-medium);
}
li {
.separator {
margin-right: var(--space-1);
.d-icon {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
}
}
}