Fix: Reference page subcategory heading margins overridden by global CSS

[MishtiGarg250]

Description

This PR fixes issue in #1538 , following the issue in #370, where the conditional mb-[var(--gutter-md)] Tailwind classes applied to subcategory headings weren't actually displaying.

The Cause:
Because Tailwind v4 relies heavily on cascade layers, its utility classes are placed in @layer utilities. However, the margin-bottom: 0px; rule for section h2 in styles/global.scss was completely unlayered. In standard CSS cascade behavior, unlayered CSS always beats layered CSS regardless of specificity, which caused global.scss to override the Tailwind utilities.

The Fix:
Wrapped the section and .section layout rules in styles/global.scss with @layer components { ... }.
By moving these rules to the components layer:

1. They maintain their precedence over Tailwind's base layer (ensuring our custom font sizes aren't overridden by the Tailwind preflight).
2. They now yield precedence to Tailwind's utilities layer.

As a result, the conditional Tailwind utility classes (mb-[var(--gutter-md)] and mb-0) in ReferenceDirectoryWithFilter now properly take effect.

Testing

• Checked categories without a visible subcategory heading (e.g., "Constants" and "Transform") to ensure the mb-[var(--gutter-md)] gap appears.
• Checked categories with an h3 heading to ensure mb-0 is appropriately applied.
• Verified layouts on both mobile and desktop screen sizes.

[Nwakaego-Ego]

Hi @MishtiGarg250, thank you for working on this PR. I tested the changes locally. The bottom-margin fix works. On main, the Constants h2 has the mb-[var(--gutter-md)] class, but the browser still applies a bottom margin of 0px. On this PR, the class works and the bottom margin becomes 40px. However, @layer components currently wraps the whole section, .section block, not only the bottom-margin rule causing the problem. This changes the priority of the other section styles as well. In DevTools, Tailwind’s base styles override those section styles, causing these changes:

• section bottom border: approximately 1px - 0px;
• section bottom padding: 80px - 0px;
• section top margin: 20px - 0px;
• h2 top margin: 40px - 32px.

Could you limit the layer change to the heading bottom-margin rule, or adjust the layer order so the other section styles keep their current values? I also checked Shape. It has a visible h3 called “2D Primitives,” so the Shape h2 should receive mb-0 because the h3 already provides spacing. Instead, it receives mb-[var(--gutter-md)], which adds a 40px bottom margin. This happens because the condition checks only category.subcats[0]. The first item has no name, while “2D Primitives” appears later in the list. The condition therefore decides that there is no visible h3 and applies the extra margin.

The CSS change does not cause the wrong class to be assigned; it only allows that class to take effect. Could you please review the condition so categories with a visible h3 receive mb-0, as intended in #370?

Lastly, this PR deletes package-lock.json, accounting for 24,670 unrelated deleted lines. Please update the branch with main and keep the current package-lock.json before the next review. Thank you.

[MishtiGarg250]

Hi @Nwakaego-Ego , okay I will update you after applying all those changes

[doradocodes]

@MishtiGarg250 I found an older Issue/PR that is related to issues with spacing in the headers of the Reference page:

• Issue: Add Adequate Spacing Between Text and Images for Improved Visibility in Example Page #573
• PR: added padding in examples header #632

Perhaps you may want to take a look and see if the solutions conflict. PR #632 is from 2024, so we can close that if you feel your solution will fix that as well.