Add recipe tags functionality to RecipeModal

- Implemented display of recipe tags in a compact format within the RecipeModal.
- Added tooltip for additional tags with hover functionality.
- Updated CSS styles for recipe tags and tooltips to enhance visual presentation.
- Adjusted layout and padding in related components for improved aesthetics.

static/css/components/recipe-modal.css

@@ -6,6 +6,93 @@
     border-bottom: 1px solid var(--lora-border);
 }
 
+/* Recipe Tags styles */
+.recipe-tags-container {
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 10px;
+}
+
+.recipe-tags-compact {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    align-items: center;
+}
+
+.recipe-tag-compact {
+    background: rgba(0, 0, 0, 0.03);
+    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: rgba(255, 255, 255, 0.03);
+    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: 0 3px 8px rgba(0, 0, 0, 0.15);
+    padding: 10px 14px;
+    max-width: 400px;
+    z-index: 10;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+    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: rgba(0, 0, 0, 0.03);
+    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: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
 /* Top Section: Preview and Gen Params */
 .recipe-top-section {
     display: grid;
@@ -205,7 +292,7 @@
 .recipe-loras-list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     overflow-y: auto;
     flex: 1;
 }
@@ -213,7 +300,7 @@
 .recipe-lora-item {
     display: flex;
     gap: var(--space-2);
-    padding: var(--space-2);
+    padding: 10px var(--space-2);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     background: var(--bg-color);
@@ -229,8 +316,8 @@
 }
 
 .recipe-lora-thumbnail {
-    width: 50px;
-    height: 50px;
+    width: 46px;
+    height: 46px;
     flex-shrink: 0;
     border-radius: var(--border-radius-xs);
     overflow: hidden;
@@ -246,7 +333,7 @@
 .recipe-lora-content {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
     flex: 1;
     min-width: 0;
 }
@@ -291,10 +378,9 @@
     padding: 2px 8px;
     border-radius: var(--border-radius-xs);
     font-size: 0.85em;
+    color: var(--lora-accent);
 }
 
-
-
 .missing-badge {
     display: inline-flex;
     align-items: center;