feat(tags): unify recipe modal tag UI with model modal

- Replace recipe modal's custom tag display/edit with shared
  renderCompactTags/setupTagEditMode from ModelTags and utils
- Remove 300+ lines of duplicated tag display and editing code
- Parameterize setupTagEditMode with saveHandler/onSaved/showSuggestions
  options for recipe-specific save flow (updateRecipeMetadata + dirty state)
- Scope all DOM queries in ModelTags.js via options.container / this.closest
  to prevent cross-modal element conflicts
- Fix edit button alignment (justify-content: flex-start)
- Fix tag tooltip selector scoping in setupTagTooltip
- Add width: 100% to #recipeTagsContainer for edit container full width

static/css/components/lora-modal/tag.css

@@ -17,6 +17,8 @@
   flex-wrap: nowrap;
   gap: 6px;
   align-items: center;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .model-tag-compact {
@@ -28,6 +30,9 @@
   font-size: 0.75em;
   color: var(--text-color);
   white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Style for empty tags placeholder */
@@ -118,8 +123,9 @@
 /* Model Tags Edit Mode */
 .model-tags-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  overflow: hidden;
 }
 
 .edit-tags-btn {
@@ -132,6 +138,7 @@
   border-radius: var(--border-radius-xs);
   transition: var(--transition-base);
   margin-left: var(--space-1);
+  flex-shrink: 0;
 }
 
 .edit-tags-btn.visible,

static/css/components/recipe-modal.css

@@ -9,6 +9,10 @@
     position: relative;
 }
 
+#recipeTagsContainer {
+    width: 100%;
+}
+
 .recipe-modal-header h2 {
     margin: 0 0 var(--space-1);
     padding: var(--space-1);
@@ -95,127 +99,11 @@
     min-width: 0;
 }
 
-.content-editor.tags-editor input {
-    font-size: 0.9em;
-}
-
 /* Remove obsolete button styles */
 .editor-actions {
     display: none;
 }
 
-/* Special styling for tags content */
-.tags-content {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 8px;
-}
-
-.tags-display {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 6px;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-}
-
-.no-tags {
-    font-size: 0.85em;
-    color: var(--text-color);
-    opacity: 0.6;
-    font-style: italic;
-}
-
-/* Recipe Tags styles */
-.recipe-tags-container {
-    position: relative;
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-.recipe-tags-compact {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 6px;
-    align-items: center;
-}
-
-.recipe-tag-compact {
-    background: var(--surface-subtle);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 8px;
-    font-size: 0.75em;
-    color: var(--text-color);
-    white-space: nowrap;
-}
-
-[data-theme="dark"] .recipe-tag-compact {
-    background: var(--surface-subtle);
-    border: 1px solid var(--lora-border);
-}
-
-.recipe-tag-more {
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 8px;
-    font-size: 0.75em;
-    cursor: pointer;
-    white-space: nowrap;
-    font-weight: 500;
-}
-
-.recipe-tags-tooltip {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 0;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    box-shadow: var(--shadow-dropdown);
-    padding: 10px 14px;
-    max-width: 400px;
-    z-index: 10;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-4px);
-    transition: var(--transition-base);
-    pointer-events: none;
-}
-
-.recipe-tags-tooltip.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-    pointer-events: auto;
-}
-
-.tooltip-content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.tooltip-tag {
-    background: var(--surface-hover);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-xs);
-    padding: 3px 8px;
-    font-size: 0.75em;
-    color: var(--text-color);
-}
-
-[data-theme="dark"] .tooltip-tag {
-    background: var(--surface-hover);
-    border: 1px solid var(--lora-border);
-}
-
 #recipeModal .modal-content {
     display: flex;
     flex-direction: column;
@@ -1153,7 +1041,7 @@
         max-height: 2.4em;
     }
 
-    .recipe-tags-container {
+    #recipeTagsContainer {
         margin-bottom: 6px;
     }