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

Development

AI-generated summary

Canapin raised an issue regarding the before-topic-progress outlet in the mobile timeline container, noting it is unnecessarily wrapped in a <span> tag. This wrapper interferes with custom content layout, such as inserting buttons that fail to match element heights due to the inline nature of the span. While a CSS workaround was considered, it risks conflicting with other plugins. Canapin suggested removing the span from the source file if it serves no functional purpose. awesomerobot confirmed the span can be removed, explaining it was a remnant of legacy outlet behavior that has been eliminated in other cases due to similar layout issues. A pull request was opened to address this: PR #37449.

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

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: