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

fix: bucket grid now renders 3x3+1 numpad layout on all screen sizes

Browse source
This commit is contained in:
pyr0ball 2026-03-04 11:31:36 -08:00
parent 92da5902ba
commit 8ec2dfddee
1 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/src/components/LabelBucketGrid.vue
View file

@ -39,16 +39,17 @@ function onDrop(name: string) {
<style scoped> <style scoped>
.label-grid { .label-grid {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.5rem; gap: 0.5rem;
transition: all var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)); transition: gap var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)),
padding var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1));
} }
/* Mobile: 3-column numpad layout */ /* 10th button (hired / key h) — centered below the 3×3 like a numpad 0 */
@media (max-width: 480px) { .label-btn:last-child {
.label-grid { grid-column: 1 / -1;
grid-template-columns: repeat(3, 1fr); max-width: calc(33.333% - 0.34rem);
} justify-self: center;
} }
.label-grid.bucket-mode { .label-grid.bucket-mode {
@ -69,7 +70,14 @@ function onDrop(name: string) {
background: transparent; background: transparent;
color: var(--color-text, #1a2338); color: var(--color-text, #1a2338);
cursor: pointer; cursor: pointer;
transition: all var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)); transition: min-height var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)),
padding var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)),
border-width var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)),
font-size var(--bucket-expand, 250ms cubic-bezier(0.34, 1.56, 0.64, 1)),
background var(--transition, 200ms ease),
transform var(--transition, 200ms ease),
box-shadow var(--transition, 200ms ease),
opacity var(--transition, 200ms ease);
font-family: var(--font-body, sans-serif); font-family: var(--font-body, sans-serif);
} }