Why is the before-topic-progress outlet wrapped with a <span>?

Dev
1

I was trying to add content to the mobile timeline container.

There are two outlets in this container.

before-topic-progress and after-topic-progress.

before-topic-progress is wrapped with <span> and I don’t see why. :thinking:

The container isn’t inline, and I see no reason why a span should be forcefully wrapped around this outlet. It has no obvious purpose and interferes with our own content layout. For example, if we want to insert a button, the button won’t be able to match the other elements’ heights because of this span:

image

I don’t see any elegant way to solve this. The most straightforward is to use something like

#topic-progress-wrapper > span:first-child {
    display: flex;
  }

But if multiple plugins or components use the same outlet, forcing a flex on the parent can mess up the style of other content (an edge case, I reckon).

If this span serves no purpose, could it be removed from this file?

2 Likes
2

Yes, I think we can remove it, if I recall correctly these spans were added because it’s closer to what the legacy behavior of outlets was. We’ve already removed a good number of them on a case-by-case basis because they have a tendency to get in the way, as you’ve experienced.

Will be done here:

3 Likes