Skip to content

feat: move action buttons to mobile drawer to fix toolbar overflow - #83

Merged
rmstdope merged 2 commits into
mainfrom
mobile-toolbar-overflow-fix
Apr 20, 2026
Merged

rmstdope merged 2 commits into
mainfrom
mobile-toolbar-overflow-fix

Conversation

@rmstdope

Copy link
Copy Markdown
Owner

Summary

Fixes the mobile toolbar overflow where 8 buttons caused the page to be horizontally scrollable on handheld devices.

Changes

  • TopBar.vue: hide Quicksave/Quickload/Save/Load/Help on mobile screens (max-md:hidden) - only Title, Music mute, Sound mute, and Hamburger remain visible
  • MobileDrawer.vue: add action chips row at top of drawer (Quicksave, Quickload, Save, Load, Help) — each chip emits its action and auto-closes the drawer
  • GameLayout.vue: wire new MobileDrawer action emits to existing handlers (store.saveGame, store.loadGame, onOpenSaveDialog, onOpenLoadDialog, onHelp)
  • game.spec.ts: 3 new e2e tests covering mobile toolbar overflow fix

Pre-merge Checklist

  • Lint passes
  • Prettier passes
  • vue-tsc passes
  • Unit tests pass (254 tests)
  • E2E tests pass (full suite)
  • Build passes

Formatting constraints verified

- TopBar: hide Quicksave/Quickload/Save/Load/Help on mobile (max-md:hidden)
- MobileDrawer: add action chips row at top with auto-close on tap
- GameLayout: wire new MobileDrawer action emits
- 3 new e2e tests covering mobile toolbar overflow fix

Formatting constraints verified
Prettier reformatted inline @click handlers to multi-line without
semicolons, which broke Vue's template parser. Replaced with an
emitAndClose() helper using explicit conditional dispatch to also
satisfy TypeScript's defineEmits overload resolution.
@rmstdope
rmstdope merged commit 171aaef into main Apr 20, 2026
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant