Conflicting declarations on two components: Full-width layout and header search

If I recall correctly, the extra wrapper makes it easier to get the title aligned with the topic content because I can set the combined .header-contents__toggle-and-logo width to var(--d-sidebar-width), and it’s the same width as the sidebar regardless of the content.

Without the extra wrapper, the layout is workable… but with two grid columns I can’t rely on a single width for both.

I need to assume the sidebar toggle will always be some static width, and then calc the max logo width based on that. That works, but I recall it being more fragile… I haven’t looked at this for a while, but maybe it’s worth another attempt :thinking:

Back to this… I can see why it was done with an override. Without it you have to decorate the title or header-icons widget, so you end up adding content inside .title or .panel, which makes center-alignment of the search bar more difficult… and requires some CSS that makes the layout more fragile and makes compatibility with other header components harder. Ideally the search bar content should be outside of these divs, but there’s nothing to hook into to do that.

We can now add a plugin outlet to widgets, so that could help…

https://github.com/discourse/discourse/pull/22285

This would allow content to be added before the .panel div, rather than inside it with decorateWidget. In this case the template override could be removed from the header-search component, and a new connector can be added to:

javascripts/discourse/connectors/before-header-panel

which could contain

<MountWidget @widget="search-banner" />

Adding a plugin outlet to a widget so we could add a widget to a plugin outlet seems a little convoluted though… @david/@cvx do you know if this would be bad for performance or cause any other issues ?