CSS regressão: .navigation-container border-bottom sem espaçamento após última atualização

[xkhalid]

Olá equipe do Discourse ,

Após a última atualização, notei uma regressão de CSS relacionada ao elemento .navigation-container nas páginas de categoria.

Anteriormente, havia um espaçamento natural ou margem entre a borda inferior do .navigation-container e o conteúdo abaixo (como as caixas de categoria). Agora, a borda está colada ao próximo elemento, sem margem ou preenchimento, o que parece visualmente apertado e inconsistente.

Isso só começou após a atualização mais recente. Parece vir de:

.navigation-categories .navigation-container,
.categories-list .navigation-container {
  border-bottom: 3px solid var(--primary-low-mid-or-secondary-high);
}

Eu corrigi manualmente adicionando:

margin-bottom: 24px;

Isso restaura o espaçamento, mas, idealmente, isso deve ser tratado pelo core ou pelo tema padrão.

---

Antes:

Depois:

---

Atenciosamente,

[chapoi]

Olá,

Não consigo reproduzir este problema. Você está vendo o mesmo aqui no meta ou apenas no seu próprio site?

Você poderia compartilhar em quais páginas exatas você vê isso? Por exemplo, verifiquei https://meta.discourse.org/categories aqui no meta, que parece estar tudo bem para mim.

[Moin]

Acho que consigo reproduzir isso usando o tema “air” aqui no Meta

[chapoi]

Obrigado, isso ajuda.

@jordan.vidrine talvez causado pela nova variável global?

.container.list-container.--categories {
  padding: 0 var(--list-container-categories-padding-x);
}

O tema Air usa um componente personalizado custom-category-boxes-container, então não acho que haja uma correção geral no núcleo para isso. Nossos próprios layouts de página de categoria foram todos ajustados para ele, tanto quanto sei: a visualização normal em caixa parece boa.

@xkhalid Você está usando algum componente personalizado nessa página?

[xkhalid]

Olá,

عالم الراوترات

---

Eu uso o Air-Theme

Air Theme

Summary Air Theme is a clean & modern theme with a handful of theme components included to enhance your forum! Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-air New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme Features Light Mode [Light Mode] Dark Mode [Dark Mode] Categories Page [Categories Page] This theme include…

---

E estes são meus plugins:

[chapoi]

Ok, isso explica, obrigado. Corrigiremos o tema do ar em breve.

[xkhalid]

Obrigado @chapoi pela sua resposta rápida!

Adicionei isso dentro do CSS para corrigir temporariamente:

.navigation-categories .navigation-container,
.categories-list .navigation-container {
    border-bottom: 3px solid var(--primary-low-mid-or-secondary-high);
    margin-bottom: 24px;
}

[chapoi]

Corrigido em

UX: add spacing in desktop mode

Obrigado pelo relatório!