fix: responsive layout – game playable on all screen sizes

[Copilot]

The game board was hardcoded at WIDTH_GAME = 1000px with fixed-width containers (w-[700px], w-[1200px]), making it overflow and unplayable on screens narrower than ~1000px.

Changes

Game board scaling (GameView.vue)

• Uses useWindowSize() (VueUse, already a dependency) to reactively track viewport width
• Computes boardScale = min(1, (windowWidth - 32) / WIDTH_GAME) and applies it as a CSS transform — game logic and drag-and-drop are unaffected
• Controls row and hint text track the scaled board width

const { width: windowWidth } = useWindowSize();
const boardScale = computed(() =>
  Math.min(1, (windowWidth.value - 32) / WIDTH_GAME)
);

Home page (MainView.vue)

• w-[700px] → w-full max-w-[700px] px-4
• Loading placeholder span changed from fixed w-[700px] to w-full

Modal (UiModal.vue)

• w-[1200px] h-[820px] → w-[min(90vw,1200px)] h-[min(85vh,820px)]

Layouts (game.vue, default.vue)

• h-lvh overflow-hidden → min-h-lvh overflow-x-hidden to allow vertical scrolling on small viewports

i18n

• Hardcoded Polish hint text in GameView.vue extracted to $t() with English translation added

Original prompt

popraw responsywnosc przy nie ktorych ekranach nie da sie gra i to zle wyglada mozesz to porpawic pod zgledem UX

The user has attached the following files from their workspace:

• modules/core/index.ts

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
perplex-image	Error		Feb 23, 2026 11:15pm