From a9d04bb0093326cb9a7dd4d7e7f8a82bba6d9de3 Mon Sep 17 00:00:00 2001
From: Patrick Erichsen <patrick.a.erichsen@gmail.com>
Date: Fri, 31 Jul 2026 15:03:55 -0700
Subject: [PATCH] fix: align trending list headers to edges (#3361)

---
 src/routes/skills/-SkillsResults.tsx | 7 +++++--
 src/styles.css                       | 9 +++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/routes/skills/-SkillsResults.tsx b/src/routes/skills/-SkillsResults.tsx
index 4382801b..eb4d50d5 100644
--- a/src/routes/skills/-SkillsResults.tsx
+++ b/src/routes/skills/-SkillsResults.tsx
@@ -270,8 +270,11 @@ export function SkillsResults({
         </div>
       ) : (
         <div className="browse-list-stack">
-          <div className="browse-list-head" aria-hidden="true">
-            <span className="browse-list-head-icon-spacer" />
+          <div
+            className={`browse-list-head${showTrendingLayout ? " browse-list-head-trending" : ""}`}
+            aria-hidden="true"
+          >
+            {showTrendingLayout ? null : <span className="browse-list-head-icon-spacer" />}
             <span className="browse-list-head-label">Skill</span>
             {showTrendingLayout ? null : <span className="browse-list-head-label">Category</span>}
             <span className="browse-list-head-label browse-list-head-stat">
diff --git a/src/styles.css b/src/styles.css
index fbcd9f15..f7aabed4 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -17225,6 +17225,15 @@ a.agentic-risk-finding-title:focus-visible {
   justify-self: end;
 }
 
+.browse-page .browse-list-head.browse-list-head-trending {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.browse-page .browse-list-head.browse-list-head-trending .browse-list-head-label,
+.browse-page .browse-list-head.browse-list-head-trending .browse-list-head-stat {
+  grid-column: auto;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;