From ba25ee47a5294cc75b5b116a88df2db1f9721c66 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Wed, 4 Mar 2026 12:26:04 -0800
Subject: [PATCH] fix: pin bucket grid to bottom of viewport with sticky
 footer; prevents mis-click from layout shift

---
 web/src/views/LabelView.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/views/LabelView.vue b/web/src/views/LabelView.vue
index 2d3fe67..9c9a2c7 100644
--- a/web/src/views/LabelView.vue
+++ b/web/src/views/LabelView.vue
@@ -49,11 +49,13 @@
         />
       </div>
 
-      <LabelBucketGrid
-        :labels="labels"
-        :is-bucket-mode="isDragging"
-        @label="handleLabel"
-      />
+      <div class="bucket-grid-footer">
+        <LabelBucketGrid
+          :labels="labels"
+          :is-bucket-mode="isDragging"
+          @label="handleLabel"
+        />
+      </div>
     </template>
 
     <!-- Undo toast -->
@@ -393,5 +395,18 @@ onUnmounted(() => {
 
 .card-stack-wrapper {
   flex: 1;
+  /* Give bottom breathing room so grid doesn't overlap content */
+  padding-bottom: 0.5rem;
+}
+
+/* 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;
 }
 </style>