Il semble que les deux composants réorganisent la div .contents dans l’en-tête.
La structure avec la mise en page pleine largeur :
Structure avec header-search :
Je ne peux donc pas les utiliser ensemble. Mais je ne sais pas où corriger cela au mieux ?
J’ai rencontré exactement ce problème avec ces deux composants la semaine dernière… c’est un peu délicat car j’avais l’intention que le composant pleine largeur soit une expérience temporaire, mais nous n’avons rien à l’ordre du jour pour l’intégrer par défaut, il reste donc plus longtemps que prévu.
Le composant pleine largeur n’est pas idéal car il nécessite de modifier le modèle d’en-tête (la seule façon dont j’ai pu surmonter certains problèmes de mise en page).
À première vue… je ne pense pas que la surcharge de modèle dans le composant de recherche d’en-tête soit nécessaire, je peux donc examiner comment la déplacer vers un décorateur de widget, ce qui éviterait le problème.
Ce que j’ai essayé comme solution temporaire est de ne pas modifier le widget header-contents sur le composant pleine largeur. Ainsi, le sidebar-toggle et le titre ne sont pas regroupés sous __toggle-and-logo. Et ensuite, arrangez les deux dans la zone de grille (toggle grid-area). Je n’ai pas vu de problèmes de mise en page avec cela jusqu’à présent. Mais je manque probablement quelque chose ?
Je pense qu’il est très populaire. J’ai trois projets de personnalisation en cours et tous ont opté pour la pleine largeur. C’est aussi pourquoi j’ai posté ceci, je préférerais ne pas modifier les composants officiels pour obtenir ce qui semble être un choix courant.
Si je me souviens bien, le wrapper supplémentaire facilite l’alignement du titre avec le contenu du sujet car je peux définir la largeur combinée de .header-contents__toggle-and-logo sur var(--d-sidebar-width), et c’est la même largeur que la barre latérale quel que soit le contenu.
Sans le wrapper supplémentaire, la mise en page est réalisable… mais avec deux colonnes de grille, je ne peux pas compter sur une largeur unique pour les deux.
Je dois supposer que le sélecteur de barre latérale aura toujours une largeur statique, puis calculer la largeur maximale du logo en fonction de cela. Cela fonctionne, mais je me souviens que c’était plus fragile… Je n’ai pas regardé cela depuis un moment, mais peut-être que cela vaut la peine d’essayer à nouveau 
Pour en revenir à cela… Je peux comprendre pourquoi cela a été fait avec une substitution. Sans cela, vous devez décorer le widget de titre ou d’icônes d’en-tête, vous finissez donc par ajouter du contenu à l’intérieur de .title ou .panel, ce qui rend l’alignement centré de la barre de recherche plus difficile… et nécessite du CSS qui rend la mise en page plus fragile et rend la compatibilité avec d’autres composants d’en-tête plus difficile. Idéalement, le contenu de la barre de recherche devrait être en dehors de ces divs, mais il n’y a rien auquel se raccrocher pour le faire.
Nous pouvons maintenant ajouter une sortie de plugin aux widgets, donc cela pourrait aider…
Cela permettrait d’ajouter du contenu avant la div .panel, plutôt qu’à l’intérieur avec decorateWidget. Dans ce cas, la substitution de modèle pourrait être supprimée du composant header-search, et un nouveau connecteur peut être ajouté à :
javascripts/discourse/connectors/before-header-panel
qui pourrait contenir
<MountWidget @widget="search-banner" />
Cependant, ajouter une sortie de plugin à un widget pour pouvoir ajouter un widget à une sortie de plugin semble un peu compliqué… @david/@cvx savez-vous si cela serait mauvais pour les performances ou causerait d’autres problèmes ?
Soit dit en passant, voici ce que j’ai essayé comme correction sur le composant pleine largeur : https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents
C’est-à-dire :
div d’enveloppement supplémentaire autour du sélecteur et du logo du titreCependant, je constate que le logo du titre revient au petit logo lorsque les titres de sujet sont affichés dans l’en-tête. Cela se produit également ici sur meta dans la disposition pleine largeur. Je ne comprends pas vraiment quels arguments de modèle utiliser ici pour toujours afficher le logo complet.
Je vois, vous les avez tous deux placés dans la même zone de grille et appliqué une marge au logo… cela semble être un compromis raisonnable !
c’est pourquoi le home-logo est rouvert ici :
Si la barre latérale n’est pas affichée, elle utilise la logique de logo par défaut pour passer de grand/petit… si la barre latérale est affichée, elle renvoie toujours le grand logo.
Ce serait peut-être un peu plus lent, mais je ne suis pas trop inquiet dans ce cas car il n’y a qu’une seule instance de la sortie de plugin sur la page (par opposition, par exemple, à une sortie de plugin de type « topic-list-item » qui serait rendue plus de 25 fois).
Ajouter une sortie là-bas me semble une excellente idée 
ok, j’ai mis à jour les deux composants pour éviter les remplacements de modèles —
Ils devraient donc maintenant fonctionner ensemble 
merci pour les suggestions @manuel !