CSS回归：.navigation-container的border-bottom在最新更新后没有间距

用户体验
,
1

Hi Discourse team :waving_hand:,

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 :

image
image1141×155 26.8 KB

After :

image
image1119×131 15.5 KB

BR

3 个赞
3

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.

4

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

Screenshot_20250804_132525_Firefox
Screenshot_20250804_132525_Firefox1749×679 111 KB

3 个赞
5

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?

1 个赞
6

Hi,

—-

i use Air-Theme

And this is my plugins :

image
image1290×850 77.8 KB

image
image1290×2323 104 KB

image
image1290×398 70.9 KB

7

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

1 个赞
8

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;
}
1 个赞
10

Fixed in

Thanks for the report!

4 个赞
11

This topic was automatically closed after 4 days. New replies are no longer allowed.