archilyzer

commit 284472d2feea6d80ca1885c693ca3cadb6c61250
parent ac60add03bb335b8380e5ec6648d6188f40c38f8
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Fri, 22 May 2026 11:18:15 -0400

virtual list gaps

Diffstat:
M
common/components/TranscriptSearch.tsx
 | 
33
+++++++++++++++++++++------------

1 file changed, 21 insertions(+), 12 deletions(-)
diff --git a/common/components/TranscriptSearch.tsx b/common/components/TranscriptSearch.tsx
@@ -1637,21 +1637,30 @@ function VirtualResultList({
     >
       {virtualItems.map((vi) => {
         const row = flatRows[vi.index];
+        // The outer (positioning) wrapper carries `pb-3` on last-in-card
+        // rows so the next card starts 12px lower. Margins are no good
+        // here — sibling absolutely-positioned rows ignore them, but the
+        // virtualizer's ResizeObserver picks up padding as part of the
+        // measured row height, which pushes subsequent translateY values.
+        // The inner div holds the actual visual frame (border + bg +
+        // rounded corners) so the gap appears OUTSIDE the card.
         return (
           <VirtualRow
             key={rowKey(row)}
             measureRef={rowVirtualizer.measureElement}
             index={vi.index}
             offset={vi.start - scrollMargin}
-            className={rowFrameClass(row)}
+            className={row.isLastInCard ? "pb-3" : ""}
           >
-            <ResultRowView
-              row={row}
-              leavesById={leavesById}
-              activeVideo={activeVideo}
-              activeTime={activeTime}
-              openWithMode={openWithMode}
-            />
+            <div className={rowFrameClass(row)}>
+              <ResultRowView
+                row={row}
+                leavesById={leavesById}
+                activeVideo={activeVideo}
+                activeTime={activeTime}
+                openWithMode={openWithMode}
+              />
+            </div>
           </VirtualRow>
         );
       })}
@@ -1659,16 +1668,16 @@ function VirtualResultList({
   );
 }
 
-// Tailwind classes that recreate the original card's rounded border + the
-// gap between cards. Side borders + a top border on every non-first row
-// give the divide-y effect without a separate wrapper element.
+// Tailwind classes for the inner card-frame div. Side borders on every row,
+// plus a top border on every non-first row, give the divide-y effect; the
+// first and last rows of a card carry the rounded corners.
 function rowFrameClass(row: ResultRow): string {
   const base =
     "border-l border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900";
   const top = row.isFirstInCard
     ? "rounded-t-lg border-t"
     : "border-t border-zinc-200/60 dark:border-zinc-800/60";
-  const bottom = row.isLastInCard ? "rounded-b-lg border-b mb-3" : "";
+  const bottom = row.isLastInCard ? "rounded-b-lg border-b" : "";
   return `${base} ${top} ${bottom}`;
 }