Anúncio da casa não centralizado na topic-list-between (alinhado à esquerda)

Bug
,
1

Resumo

Os anúncios internos renderizados na posição topic-list-between não estão mais centralizados na largura da lista de tópicos. Em vez disso, eles aparecem alinhados à esquerda (confinados à área da primeira coluna). Isso parece ser uma regressão causada por tornar o componente house-ad sem tag, o que quebra a semântica de tabela.

Passos para Reproduzir

  1. Acesse Admin → Plugins → Ads
  2. Crie um Anúncio Interno (House Ad)
  3. Habilite-o para a posição: topic-list-between
  4. Visite a página inicial (ou qualquer lista de tópicos que use o layout de tabela padrão)
  5. Observe o alinhamento do anúncio interno

Comportamento Esperado

O anúncio interno deve ser renderizado centralizado em toda a largura da lista de tópicos (abrangendo todas as colunas), como fazia anteriormente.

Comportamento Atual

O anúncio interno está alinhado à esquerda e ocupa apenas a porção esquerda da tabela (aproximadamente o espaço da coluna “título do tópico”), em vez de abranger a linha.

Análise Técnica

Isso parece ser causado por marcação de tabela inválida produzida pelo componente house-ad.

Arquivo:
plugins/discourse-adplugin/assets/javascripts/discourse/components/house-ad.gjs

O componente não tem tag:

@tagName("")
export default class HouseAd extends AdComponent {

Mas ele renderiza um div com um atributo colspan:

<div
  colspan={{this.colspanAttribute}}
  class={{concatClass "house-creative" this.adUnitClass}}
  ...attributes
>

Por que isso quebra

  • colspan só funciona em <td> / <th>, não em <div>.
  • Na tabela da lista de tópicos, isso acaba sendo um <div> diretamente dentro de um <tr>, o que é HTML inválido e faz com que o navegador o exiba incorretamente (tipicamente colapsando-o na região da primeira coluna).
  • A lógica colspanAttribute() verifica se this.tagName === "td" (ou equivalente), mas como o componente não tem tag, ele nunca se torna "td", então o colspan efetivamente nunca é aplicado.

Provável Fonte da Regressão

Isso parece ter sido introduzido pela aplicação da regra de lint “componentes sem tag” / refatoração (a mudança que converteu componentes para não terem tag), que inadvertidamente quebrou componentes que precisam ser renderizados como células de tabela reais em certos conectores/posições.

Ambiente

  • Versão do Discourse: latest (tests-passed)
  • Plugin de Anúncios: discourse-adplugin integrado
  • Navegadores testados: Chrome + Firefox (parece ser independente do navegador)
1 curtida