From 975a5714d4a1a3313565ecc2da4e176ef0019c06 Mon Sep 17 00:00:00 2001
From: Mishti Garg <msihti811@gmail.com>
Date: Sun, 4 Oct 2026 07:20:00 +0530
Subject: [PATCH] fix: resolve reference category spacing and CSS layer
 priority

- Limit @layer components in global.scss strictly to the h2 bottom margin
  to prevent Tailwind base styles from overriding other section rules.
- Refactor reference category spacing in ReferenceDirectoryWithFilter:
  - Apply mb-0 unconditionally to category h2 tags.
  - Shift 40px top margin to unnamed subcategory containers to prevent
    double margins (e.g., Shape) or missing margins (e.g., Typography).
  - Prevent rendering of empty unnamed subcategories.
- Restore package-lock.json to undo accidental deletion.
---
 .../ReferenceDirectoryWithFilter/index.tsx    | 30 ++++++++++---------
 styles/global.scss                            |  4 ++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
index 2a1c6baa1f..b3329b588c 100644
--- a/src/components/ReferenceDirectoryWithFilter/index.tsx
+++ b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -267,22 +267,24 @@ export const ReferenceDirectoryWithFilter = ({
     }
     return filteredEntries.map((category) => (
       <section key={category.name}>
-        <h2
-          class={
-            subcatShouldHaveHeading(category.subcats[0], category)
-              ? "mb-0"
-              : "mb-[var(--gutter-md)]"
-          }
-          id={category.name}
-        >
+        <h2 class="mb-0" id={category.name}>
           {category.name}
         </h2>
-        {category.subcats.map((subcat) => (
-          <div key={subcat.name}>
-            {getSubcatHeading(subcat, category)}
-            {renderEntries(subcat.entries)}
-          </div>
-        ))}
+        {category.subcats.map((subcat) => {
+          const hasHeading = subcatShouldHaveHeading(subcat, category);
+          if (!hasHeading && subcat.entries.length === 0) {
+            return null;
+          }
+          return (
+            <div
+              key={subcat.name}
+              class={!hasHeading ? "mt-[var(--gutter-md)]" : undefined}
+            >
+              {getSubcatHeading(subcat, category)}
+              {renderEntries(subcat.entries)}
+            </div>
+          );
+        })}
       </section>
     ));
   };
diff --git a/styles/global.scss b/styles/global.scss
index 5c2116ce00..9d7800b05d 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -247,7 +247,9 @@ section,
   h2,
   .text-h2 {
     margin-top: var(--gutter-md);
-    margin-bottom: 0px;
+    @layer components {
+      margin-bottom: 0px;
+    }
   }
 
   h2,