github/awesome-kubernetes
1
0
Fork 0
mirror of https://github.com/nubenetes/awesome-kubernetes.git synced 2026-07-12 09:51:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
The CRITICAL/HIGH impact badge (and optional NEW pill) was absolutely
positioned top-right, so a long celeste category/title could slide
underneath it and become unreadable. Make the badge an in-flow,
right-aligned fit-content pill on its own line, with the NEW pill as a
flex sibling — impact, title and NEW can no longer overlap at any width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inaki Fernandez
2026-06-23 13:54:34 +02:00
parent 7d7694c809
commit aa0c12f143
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -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

16
docs/static/v2_elite.css vendored
View File

@@ -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;