Circuit-Forge/avocet
3
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(avocet): ball escapes overflow clip, floats above header/footer with z-index + transparency

Browse source
This commit is contained in:
pyr0ball 2026-03-05 15:14:24 -08:00
parent be3b52f150
commit e03d91ece9
2 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/components/EmailCardStack.vue
View file

@ -230,6 +230,7 @@ const cardStyle = computed(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
overflow: visible; /* ball must escape the collapsed stack bounds */
} }
.card-stack.bucket-mode .card-shadow { .card-stack.bucket-mode .card-shadow {
@ -269,6 +270,10 @@ const cardStyle = computed(() => {
} }
.card-wrapper.is-held { .card-wrapper.is-held {
cursor: grabbing; cursor: grabbing;
/* Override bucket-mode clip and opacity so the held ball renders cleanly */
clip-path: none !important;
opacity: 1 !important;
pointer-events: auto !important;
} }
/* Dismissal animations — dismiss class is only applied during the motion.rich await window, /* Dismissal animations — dismiss class is only applied during the motion.rich await window,

19
web/src/views/LabelView.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="label-view"> <div class="label-view">
<!-- Header bar --> <!-- Header bar -->
<header class="lv-header"> <header class="lv-header" :class="{ 'is-held': isHeld }">
<span class="queue-count"> <span class="queue-count">
<span v-if="loading" class="queue-status">Loading…</span> <span v-if="loading" class="queue-status">Loading…</span>
<template v-else-if="store.totalRemaining > 0"> <template v-else-if="store.totalRemaining > 0">
@ -54,7 +54,7 @@
>→</div> >→</div>
</Transition> </Transition>
<div class="card-stack-wrapper"> <div class="card-stack-wrapper" :class="{ 'is-held': isHeld }">
<EmailCardStack <EmailCardStack
:item="store.current" :item="store.current"
:is-bucket-mode="isHeld" :is-bucket-mode="isHeld"
@ -329,6 +329,11 @@ onUnmounted(() => {
justify-content: space-between; justify-content: space-between;
gap: 0.75rem; gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
transition: opacity 200ms ease;
}
.lv-header.is-held {
opacity: 0.2;
pointer-events: none;
} }
.queue-count { .queue-count {
@ -422,6 +427,14 @@ onUnmounted(() => {
min-height: 0; /* allow flex child to shrink — default auto prevents this */ min-height: 0; /* allow flex child to shrink — default auto prevents this */
overflow-y: auto; overflow-y: auto;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
transition: opacity 200ms ease;
}
/* When held: escape the overflow clip so the ball floats freely,
and rise above the footer (z-index 10) so the ball is visible. */
.card-stack-wrapper.is-held {
overflow: visible;
position: relative;
z-index: 20;
} }
/* Bucket grid stays pinned to the bottom of the viewport while the email card /* Bucket grid stays pinned to the bottom of the viewport while the email card
@ -432,10 +445,12 @@ onUnmounted(() => {
padding: 0.5rem 0 0.75rem; padding: 0.5rem 0 0.75rem;
z-index: 10; z-index: 10;
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 200ms ease,
background 200ms ease; background 200ms ease;
} }
.bucket-grid-footer.grid-active { .bucket-grid-footer.grid-active {
transform: translateY(-8px); transform: translateY(-8px);
opacity: 0.45; /* semi-transparent so ball aura is visible through it */
} }
/* ── Toss edge zones ── */ /* ── Toss edge zones ── */