Merge pull request #454 from nubenetes/feat/trending-card-impact-overlap

fix(v2): prevent Trending Now impact badge overlapping card title

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[2.9.48]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.9.48) - 2026-06-23
+
+### Fixed
+- **Trending Now cards: impact badge no longer overlaps the title**: On the V2 home page "🔥 Trending Now — Cloud Native Intelligence" lane, the `CRITICAL`/`HIGH` impact badge (and the optional `🆕 NEW` pill) was `position: absolute` in the top-right corner, so a long celeste category/title flowing in normal document position could slide right underneath it and become unreadable. The badge is now an in-flow, right-aligned pill (`width: fit-content; margin-left: auto`) on its own line at the top of the card, with the `NEW` pill laid out as a flex sibling (`gap`-spaced) — so the red impact text, the celeste title, and the green `NEW` pill can never overlap, on any card width or title length. Cards with short titles stay just as tight as before. `docs/static/v2_elite.css` only; cache-bust auto-versions from the release tag.
+
 ## [[2.9.38]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.9.38) - 2026-06-20
 
 ### Added

docs/static/v2_elite.css

@@ -1252,9 +1252,18 @@ input[type="text"] {
 }
 
 .trending-card__impact {
-  position: absolute;
-  top: 12px;
-  right: 12px;
+  /* In normal flow as a right-aligned pill on its own line, so a long celeste
+     category/title can never slide underneath it. `width: fit-content` keeps the
+     colored pill wrapped tightly around "CRITICAL"/"HIGH" + the optional NEW
+     pill; `margin-left: auto` pins it to the top-right corner. */
+  width: fit-content;
+  max-width: 100%;
+  margin-left: auto;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
   font-size: 0.75em;
   font-weight: 700;
   padding: 2px 8px;
@@ -1277,7 +1286,6 @@ input[type="text"] {
 }
 
 .trending-card__new {
-  margin-left: 6px;
   padding: 1px 6px;
   border-radius: 6px;
   font-size: 0.85em;