From 3c38c04ad43bc4929e02958f79adf1560fcac468 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 3 Apr 2026 22:54:35 -0400
Subject: [PATCH] fix(knowledge): sentinel DOM ordering + restore tag
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sentinel was first in DOM with order:9999, causing layout recalculation to
trigger IntersectionObserver multiple times (intersecting→not→intersecting)
as items were appended, producing duplicate pages. Move sentinel to AFTER
the v-for items so it's naturally last in both DOM and visual order.

Remove overflow:hidden from .k-card-tags — .k-card overflow:hidden already
clips escaping content; the extra overflow on the tags container was
collapsing its height to zero and hiding all tag pills.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/KnowledgeView.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 9dcdaf6..eba7ed1 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -382,11 +382,6 @@ watchEffect(() => {
 
         <!-- Card grid (sentinel lives inside so IntersectionObserver root works) -->
         <div v-else ref="cardGridEl" class="card-grid">
-          <!-- Infinite scroll sentinel — must be inside the scrolling root -->
-          <div ref="sentinelEl" class="scroll-sentinel">
-            <span v-if="loading && items.length > 0" class="sentinel-loading">Loading…</span>
-          </div>
-
           <div
             v-for="item in items"
             :key="item.id"
@@ -450,6 +445,11 @@ watchEffect(() => {
               <span class="k-card-date">{{ formatDate(item.updated_at) }}</span>
             </div>
           </div>
+
+          <!-- Sentinel after all cards — IntersectionObserver triggers next page load -->
+          <div ref="sentinelEl" class="scroll-sentinel">
+            <span v-if="loading && items.length > 0" class="sentinel-loading">Loading…</span>
+          </div>
         </div>
       </div>
 
@@ -853,7 +853,7 @@ watchEffect(() => {
   justify-content: space-between;
   gap: 6px;
 }
-.k-card-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; overflow: hidden; }
+.k-card-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
 .tag-pill {
   font-size: 0.68rem;
   padding: 1px 6px;
@@ -879,8 +879,7 @@ watchEffect(() => {
 
 /* ── Infinite scroll sentinel ────────────────────────────── */
 .scroll-sentinel {
-  grid-column: 1 / -1; /* span all grid columns */
-  order: 9999;         /* push to end of grid items */
+  grid-column: 1 / -1; /* span all columns so it's not a card-sized slot */
   height: 40px;
   display: flex;
   align-items: center;