From d7c5d3974707f0f026ce824388be665d7634a465 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Wed, 29 Jul 2026 05:01:22 -0400
Subject: [PATCH] feat(ui): transactions modal filter tabs pin to top with blur
 on scroll

Chips become sticky inside the modal's scroll region with a dimmed
blurred band, so the rail filter stays reachable while rows scroll
underneath. Verified in headless chromium: pinned at scroll-region top
after deep scroll, touch swipes starting on the chips still scroll.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/components/TransactionsModal.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/neode-ui/src/components/TransactionsModal.vue b/neode-ui/src/components/TransactionsModal.vue
index efa2b84c..7f970121 100644
--- a/neode-ui/src/components/TransactionsModal.vue
+++ b/neode-ui/src/components/TransactionsModal.vue
@@ -3,8 +3,10 @@
        syncViewportHeightVar in main.ts) so the tx list doesn't fill the screen. -->
   <BaseModal :show="show" :title="t('transactions.title')" max-width="max-w-2xl" content-class="max-h-[calc(var(--visual-viewport-height,100dvh)*0.6)] md:max-h-[90vh] flex flex-col" @close="close">
         <!-- Rail filter: instant ecash micro-payments pile up fast and bury
-             on-chain/Lightning rows; chips keep the standard txs reachable. -->
-        <div v-if="transactions.length > 0" class="flex gap-1.5 mb-3 shrink-0 flex-wrap">
+             on-chain/Lightning rows; chips keep the standard txs reachable.
+             Sticky inside the modal's scroll region so the tabs stay pinned
+             while rows blur past underneath. -->
+        <div v-if="transactions.length > 0" class="sticky top-0 z-10 -mx-2 px-2 pb-2 mb-1 flex gap-1.5 flex-wrap bg-black/70 backdrop-blur-md">
           <button
             v-for="f in filters"
             :key="f.key"