From c5ee1645657194da1efc54bc707951031540219c Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Wed, 29 Jul 2026 09:26:58 -0400
Subject: [PATCH] ui: format application knowledge-base card (was a wall of
 text)

The .kb-* classes had no styles, so the KB entries rendered as bare inline
spans - shortdescription and keywords (both up to 500 chars) wrapped and mashed
into one block. Style each entry as a bordered clickable card: description as
the link title clamped to 2 lines, keywords split on whitespace into small
muted chips below.
---
 .../frontend/views/ApplicationDetail.vue      | 60 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/plugins/applications/frontend/views/ApplicationDetail.vue b/plugins/applications/frontend/views/ApplicationDetail.vue
index f2c6fae..91de7f6 100644
--- a/plugins/applications/frontend/views/ApplicationDetail.vue
+++ b/plugins/applications/frontend/views/ApplicationDetail.vue
@@ -106,7 +106,13 @@
                 class="kb-item"
               >
                 <span class="kb-title">{{ kb.shortdescription }}</span>
-                <span class="kb-keywords" v-if="kb.keywords">{{ kb.keywords }}</span>
+                <span class="kb-keywords" v-if="kb.keywords">
+                  <span
+                    v-for="(kw, i) in kbKeywords(kb.keywords)"
+                    :key="i"
+                    class="kb-tag"
+                  >{{ kw }}</span>
+                </span>
               </a>
             </div>
           </div>
@@ -207,11 +213,63 @@ function formatDate(dateStr) {
 function handleImageError(e) {
   e.target.style.display = 'none'
 }
+
+// Keywords are stored space-separated; split into chips for the KB card.
+function kbKeywords(keywords) {
+  return (keywords || '').split(/\s+/).filter(Boolean)
+}
 </script>
 
 <style scoped>
 /* Application-specific styles - shared styles are in global style.css */
 
+/* Knowledge Base card: each entry is a bordered block, not a run-on line.
+   shortdescription (up to 500 chars) clamps to 2 lines; keywords render as
+   small chips below instead of a second wall of text. */
+.kb-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.kb-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  text-decoration: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+.kb-item:hover {
+  border-color: var(--primary);
+  background: var(--bg-card);
+}
+.kb-title {
+  color: var(--link);
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.kb-keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+.kb-tag {
+  font-size: 0.72rem;
+  color: var(--text-light);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 0.1rem 0.45rem;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
 /* Hero description (app-specific) */
 .hero-description {
   color: var(--text-light);