web/src/components/EmailCardStack.vue

@@ -201,7 +201,7 @@ const cardStyle = computed(() => {
     'transparent'
 
   return {
-    transform:    `translate(${deltaX.value}px, ${deltaY.value - 80}px) scale(0.55)`,
+    transform:    `translate(${deltaX.value}px, ${deltaY.value}px) scale(0.35)`,
     borderRadius: '50%',
     background:   aura,
     transition:   'border-radius 150ms ease, background 150ms ease',
@@ -230,7 +230,6 @@ const cardStyle = computed(() => {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  overflow: visible; /* ball must escape the collapsed stack bounds */
 }
 
 .card-stack.bucket-mode .card-shadow {
@@ -270,10 +269,6 @@ const cardStyle = computed(() => {
 }
 .card-wrapper.is-held {
   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,

web/src/views/LabelView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="label-view">
     <!-- Header bar -->
-    <header class="lv-header" :class="{ 'is-held': isHeld }">
+    <header class="lv-header">
       <span class="queue-count">
         <span v-if="loading" class="queue-status">Loading…</span>
         <template v-else-if="store.totalRemaining > 0">
@@ -54,7 +54,7 @@
         >→</div>
       </Transition>
 
-      <div class="card-stack-wrapper" :class="{ 'is-held': isHeld }">
+      <div class="card-stack-wrapper">
         <EmailCardStack
           :item="store.current"
           :is-bucket-mode="isHeld"
@@ -314,8 +314,7 @@ onUnmounted(() => {
   padding: 1rem;
   max-width: 640px;
   margin: 0 auto;
-  height: 100dvh;   /* hard cap — prevents grid from drifting below fold */
+  min-height: 100dvh;
-  overflow: hidden;
 }
 
 .queue-status {
@@ -329,11 +328,6 @@ onUnmounted(() => {
   justify-content: space-between;
   gap: 0.75rem;
   flex-wrap: wrap;
-  transition: opacity 200ms ease;
-}
-.lv-header.is-held {
-  opacity: 0.2;
-  pointer-events: none;
 }
 
 .queue-count {
@@ -424,33 +418,24 @@ onUnmounted(() => {
 
 .card-stack-wrapper {
   flex: 1;
-  min-height: 0;   /* allow flex child to shrink — default auto prevents this */
+  /* Give bottom breathing room so grid doesn't overlap content */
-  overflow-y: auto;
   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
    can be scrolled freely. "hired" (10th button) may clip on very small screens
    — that is intentional per design. */
 .bucket-grid-footer {
+  position: sticky;
+  bottom: 0;
   background: var(--color-bg, var(--color-surface, #f0f4fc));
   padding: 0.5rem 0 0.75rem;
   z-index: 10;
   transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
-              opacity 200ms ease,
               background 200ms ease;
 }
 .bucket-grid-footer.grid-active {
   transform: translateY(-8px);
-  opacity: 0.45; /* semi-transparent so ball aura is visible through it */
 }
 
 /* ── Toss edge zones ── */