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

fix: pin bucket grid to bottom of viewport with sticky footer; prevents mis-click from layout shift

Browse source
This commit is contained in:
pyr0ball 2026-03-04 12:26:04 -08:00
parent cf69452e42
commit ba25ee47a5
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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