lfg2025/archy
1
0
Fork 0
Code Issues 21 Pull Requests 1 Actions Packages Projects Releases 62 Wiki Activity

feat(ui): transactions modal filter tabs pin to top with blur on scroll
Some checks failed
Demo images / Build & push demo images (push) Failing after 1m59s
Details

Browse Source 
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>
This commit is contained in:
archipelago 2026-07-29 05:01:22 -04:00
parent 6ba39041d0
commit d7c5d39747
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
neode-ui/src/components/TransactionsModal.vue
View File

@ -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"