From cb18281b141a9b0923741b231b939685948e2bed Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Fri, 28 Aug 2026 22:54:25 +0800
Subject: [PATCH] fix(recipes): pin recipe modal badge sizing against
 import-modal.css collision

import-modal.css is loaded after recipe-modal.css and its unscoped
.missing-badge/.deleted-badge (equal specificity) were clobbering the
recipe modal's badge family, leaving invalid-hash-badge (no import
counterpart) at a different size. Scope the recipe status-badge sizing
under #recipeModal so import-modal.css can't override it. Also remove the
duplicate .deleted-badge block in import-modal.css.
---
 static/css/components/import-modal.css | 19 -------------------
 static/css/components/recipe-modal.css | 13 +++++++++++++
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/static/css/components/import-modal.css b/static/css/components/import-modal.css
index 329b1d89..2af575ce 100644
--- a/static/css/components/import-modal.css
+++ b/static/css/components/import-modal.css
@@ -669,25 +669,6 @@
     /* Hide the old style */
 }
 
-/* Update deleted badge to be more prominent */
-.deleted-badge {
-    display: inline-flex;
-    align-items: center;
-    background: var(--lora-warning);
-    color: white;
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.8em;
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.deleted-badge i {
-    margin-right: 4px;
-    font-size: 0.9em;
-}
-
 /* Error message styling */
 .error-message {
     color: var(--lora-error);
diff --git a/static/css/components/recipe-modal.css b/static/css/components/recipe-modal.css
index 191ea3bb..c9f8c343 100644
--- a/static/css/components/recipe-modal.css
+++ b/static/css/components/recipe-modal.css
@@ -1179,6 +1179,19 @@
     border: 1px solid oklch(var(--lora-warning) / 0.35);
 }
 
+/* Pin the recipe status-badge family (missing / deleted / invalid-hash) to its
+   compact size. import-modal.css defines unscoped .missing-badge/.deleted-badge
+   and is loaded AFTER this file, so without this higher-specificity rule its
+   padding/font-size would clobber recipe modal's, leaving invalid-hash-badge
+   (which has no import counterpart) at a different size. local-badge
+   intentionally keeps the global shared.css size. */
+#recipeModal .badge-container .missing-badge,
+#recipeModal .badge-container .deleted-badge,
+#recipeModal .badge-container .invalid-hash-badge {
+    padding: 3px 6px;
+    font-size: 0.75em;
+}
+
 /* Missing LoRAs status is a real button: the affordance must be visible at
    rest (persistent border), not only on hover. */
 .recipe-status.missing.clickable {