From d46ccb6d50a2d16c44a7efe47d318fa6bb7af78a Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Sun, 12 Apr 2026 09:35:28 +0700
Subject: [PATCH] fix: prevent large levels from overflowing the viewport

Add scrollable overflow to board wrapper, use safe centering to avoid
top-cropping, and lower minimum tile size from 16px to 10px.
---
 src/app.css               | 2 +-
 src/views/GameView.svelte | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index a2b8d38..737df3c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -53,7 +53,7 @@ html, body {
     min-height: 100vh;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: safe center;
     padding: 24px;
 }
 
diff --git a/src/views/GameView.svelte b/src/views/GameView.svelte
index 2378a56..1e7f3f1 100644
--- a/src/views/GameView.svelte
+++ b/src/views/GameView.svelte
@@ -37,7 +37,7 @@
     function computeTileSize() {
         if (!level) return 48;
         const maxTile = 56;
-        const minTile = 16;
+        const minTile = 10;
         const margin = 140; // header + hud + padding
         const maxByWidth = Math.floor((window.innerWidth - 80) / level.width);
         const maxByHeight = Math.floor((window.innerHeight - margin - 100) / level.height);
@@ -199,6 +199,9 @@
         display: flex;
         justify-content: center;
         width: 100%;
+        overflow: auto;
+        max-height: calc(100vh - 140px);
+        max-width: calc(100vw - 48px);
     }
 
     .error {