diff --git a/static/css/components/card.css b/static/css/components/card.css index 01f57c9c..dcafe2ae 100644 --- a/static/css/components/card.css +++ b/static/css/components/card.css @@ -596,18 +596,22 @@ } .model-update-badge { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 2px 10px; - border-radius: var(--border-radius-xs); + width: 18px; + height: 18px; + padding: 0; + border-radius: 4px; background: var(--badge-update-bg); color: var(--badge-update-text); font-size: 0.7rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - box-shadow: 0 4px 12px var(--badge-update-glow); + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 2px 6px var(--badge-update-glow); border: 1px solid color-mix(in oklab, var(--badge-update-bg) 55%, transparent); - white-space: nowrap; +} + +.model-update-badge i { + margin-left: 1px; + line-height: 1; } diff --git a/static/js/components/shared/ModelCard.js b/static/js/components/shared/ModelCard.js index 4c158b3c..f184fdc1 100644 --- a/static/js/components/shared/ModelCard.js +++ b/static/js/components/shared/ModelCard.js @@ -597,7 +597,7 @@ export function createModelCard(model, modelType) { ${hasUpdateAvailable ? ` - ${updateBadgeLabel} + ` : ''}