CSS regression: .navigation-container border-bottom has no spacing after latest update

[xkhalid]

Hi Discourse team ,

After the latest update, I noticed a CSS regression related to the .navigation-container element in category pages.

Previously, there was a natural spacing or margin between the bottom border of .navigation-container and the content below (like category boxes). Now, the border is tightly stuck to the next element, with no margin or padding, which looks visually cramped and inconsistent.

This only started after the most recent update. it appears to be coming from:

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

I manually fixed it by adding:

margin-bottom: 24px;

This restores the spacing, but ideally, this should be handled by core or the default theme.

---

Before :

After :

---

BR

[chapoi]

Hello,

I can’t repro this issue. Do you see the same thing here on meta or only on your own site?

Could you share which exact pages you see this on? For example, I checked https://meta.discourse.org/categories here on meta, which looks fine to me.

[Moin]

I think I can reproduce this using the air theme here on Meta

[chapoi]

Thank you, that helps.

@jordan.vidrine maybe caused by the new global var?

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

Air theme uses a custom component custom-category-boxes-container so I don’t think there is a general core fix for this. Our own category page layouts have all been adjusted to it afaict: normal box view looks fine.

@xkhalid Are you using any custom components on that page?

[xkhalid]

Hi,

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

—-

i use 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 includes…

---

And this is my plugins :

[chapoi]

Okay that explains it, thanks. We will fix the air theme shortly.

[xkhalid]

Thanks @chapoi for your fast response !

I added the following to the CSS as a temporary fix

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

[chapoi]

Fixed in
https://github.com/discourse/discourse-minimal-category-boxes/pull/55

Thanks for the report!